Toggle attr of svg with jQuery

Question

I understand that I cannot use addClass or removeClass with SVG and that I must use attr. But how can I toggle an attr of an SVG using jQuery. See my fiddle. I am trying to toggle the rotation of the arrow on click (see the commented out portion of the click function in my js section). Anybody have a better idea of how to do this?

My html

<div class="col-md-3 col-sm-4 sidebar">
                <div class="title-region">
                    <a href="">Current Page</a>
                    <svg class="down-arrow mobile-only" width="17px" height="10px">
                        <use xlink:href="#down-arrow"></use>
                    </svg><!--end hamburger-->
                </div><!--end title-region-->
                <div class="mobile-zipped">
                    <ul class="sidebar-block children">
                        <li><a href="">Child One</a></li>
                        <li><a href="">Child Two</a></li>
                        <li><a href="">Child Three</a></li>
                    </ul>
                    <ul class="sidebar-block siblings">
                        <li><a href="">Sibling One</a></li>
                        <li><a href="">Sibling Two</a></li>
                        <li><a href="">Sibling Three with a super long title</a></li>
                        <li><a href="">Sibling Four</a></li>
                    </ul>
                </div><!--end mobile-zipped-->
            </div><!--end sidebar-->

CSS:

    .sidebar {
  position: relative;
  /*width:270px*/
  height: auto;
  display: inline-block;
  /*margin-right:60px;max-width:25%*/
}

.sidebar .title-region {
  position: relative;
  height: auto;
  background: #005DAA;
  width: 100%;
  padding: 15px;
}

.sidebar .sidebar-block {
  padding: 15px;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar .down-arrow {
  float: right;
  margin-top: 8px;
  fill: #00305e;
}

JS is included in the fiddle. Any help is much appreciated!

Better idea than what? I don't see any code toggling an attribute with `attr` above. I see a bunch of at-best-tangentially-related CSS and markup... — T.J. Crowder, Sep 17 '15 at 15:21
The content of your question goes **in** your question, not just linked. Links rot, and people shouldn't have to go off-site to help you. A fiddle is an adjunct, not a substitute, for having the relevant code/markup in the question. (Although these days you're usually better off using Stack Snippets, the `<>` button unless you need something jsFiddle has that SS don't.) — T.J. Crowder, Sep 17 '15 at 15:26
Sorry about that, will keep it in mind for future. Thank you for your help — JordanBarber, Sep 17 '15 at 15:32
Please edit the relevant code into the question (and remove the irrelevant CSS). Temember, SO isn't here just for you, now. It's here for others, later -- in fact, that's its *primary* purpose. — T.J. Crowder, Sep 17 '15 at 15:33

rrk · Accepted Answer · 2015-09-17T16:12:08.083

2

See demo.

var classNames = accordionArrow.attr('class').split(' ');
if ($.inArray("flipped", classNames) != -1) {
    //jQuery.grep() to remove duplicates even if multiple occurrences present
    classNames = $.grep(classNames, function (element) {
        return element !== "flipped";
    });
} else {
    classNames.push("flipped");
}
accordionArrow.attr('class', classNames.join(' '));

edited Sep 17 '15 at 16:12

answered Sep 17 '15 at 15:29

rrk

15,677
4
29
45

That's going to be fairly fragile; for instance, if you later edit the markup and add an unrelated class, or even just change the order of the classes. – T.J. Crowder Sep 17 '15 at 15:34
@T.J.Crowder if I split class attribute to array and then find `flipped`, then we'll be fine, right? – rrk Sep 17 '15 at 15:36
That's one way, yeah. – T.J. Crowder Sep 17 '15 at 15:38
@user3633970 a change is made in the answer. Its better than the initial solution. – rrk Sep 17 '15 at 15:43
So now, if I add a class to the element later adding a new feature, the first time this code runs it blows away that new class. – T.J. Crowder Sep 17 '15 at 15:48

score 1 · Answer 2 · answered Sep 17 '15 at 15:37

Assuming you want to add/remove a flipped class on accordianArrow, you can use the old-fashioned way of dealing with classes:

var flipped = /\bflipped\b/;
var cls = accordianArrow.attr("class");
var updated = cls.replace(flipped, '');
if (cls === updated) {
    // Didn't have it; add it
    cls += " flipped";
} else {
    // We removed it, don't leave dangling whitespace (though it doesn't really matter, you could leave this off)
    cls = $.trim(cls);
}
accordianArrow.attr("class", cls);

Toggle attr of svg with jQuery

2 Answers2