CODEWITHSUNDEEP
jqueryhtml
MrGoodKat
MrGoodKat

Reputation: 58

jQuery Accordion Menu Collapse

I have an accordion menu that when you click the "active" tab it's not collapsing itself back down. If you click any other of the tabs the previous active tab collapses ok...

I really cant see what is wrong with, i assume, the jQuery function.

i created a jsfiddle to debug it but anything i have run so far gives the same result.

Any help is much appreciated

http://jsfiddle.net/qz52V/1/

html:

<div id="accordianSide">
<ul>
    <li>
        <h3><span class="icon-desktop"></span>Channels We Support</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
        </ul>
    </li>
    <!-- we will keep this LI open by default -->
    <li>
        <h3><span class="icon-bar-chart"></span>Market Places</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Listing Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Order Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li>
        </ul>
    </li>
    <li>
        <h3><span class="icon-credit-card"></span>Paid Search</h3>
        <ul class="sub_Menu">
            <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Driven Search</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Keyword Expansion</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Bid Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Search Query Analysis</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Campaign Management</a></li>
            <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li>
        </ul>
    </li>
</ul>

jQuery:

$(document).ready(function () {
  $('#accordianSide h3').click(function(){
    if ($(this).attr('class') != 'activeAcc'){
      $('#accordianSide ul ul').slideUp();
      $(this).next().slideToggle();
      $('#accordianSide h3').removeClass('activeAcc');
      $(this).addClass('activeAcc');
    }
  });
});

css:

#accordianSide {
background: #fff;
width: 230px;
color: #000;
font-family: 'Open Sans', arial, verdana;
}

/*heading styles*/
#accordianSide h3 {
font-size: 12px;
line-height: 50px;
padding: 0 10px;
cursor: pointer;
background: #fff; 
}
/*heading hover effect*/
#accordianSide h3:hover {
color:#21abe2;
background:#f1f1f1;
}
/*iconfont styles*/
#accordianSide h3 span {
font-size: 16px;
margin-right: 10px;
}
/*list items*/
#accordianSide li {
list-style-type: none;
}
/*links*/
#accordianSide ul ul li a {
color: #000;
text-decoration: none;
font-size: 12px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.15s;
}
/*hover effect on links*/
#accordianSide ul ul li a:hover {
background: #f1f1f1;
border-left: 5px solid #21abe2;
color:#21abe2;
}
#accordianSide ul ul {
display: none;
}
#accordianSide li.activeAcc ul {
display: block;
}
.activeAcc {
color:#21abe2;
}

Upvotes: 0

Views: 801

Answers (1)

PiLHA
PiLHA

Reputation: 2374

Add this code to you if

else {
    $('#accordianSide ul ul').slideUp();
    $('#accordianSide h3').removeClass('activeAcc');
}

Result

$(document).ready(function () {
  $('#accordianSide h3').click(function(){
    if ($(this).attr('class') != 'activeAcc'){
      $('#accordianSide ul ul').slideUp();
      $(this).next().slideToggle();
      $('#accordianSide h3').removeClass('activeAcc');
      $(this).addClass('activeAcc');
    } else {
      $('#accordianSide ul ul').slideUp();
      $('#accordianSide h3').removeClass('activeAcc');
    }
  });
});

Upvotes: 1

Related Questions