It has come to my attention that addClass and removeClass cannot be used with SVG, requiring the use of attr instead. However, I am facing a challenge in toggling an attribute of an SVG using jQuery. To see the specific issue I am encountering and my attempted solution, please check out my JSFiddle. My goal is to toggle the rotation of an arrow upon click (refer to the commented-out part of the click function in the JavaScript section). Does anyone have an alternative approach for achieving this?
Here's a snippet of 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 snippet:
.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;
}
The JavaScript code can be found in the provided JSFiddle. Any assistance on resolving this issue would be highly appreciated!