CODEWITHSUNDEEP
jqueryaccordionjquery-ui-accordion
Anie
Anie

Reputation: 1

accordion shows active li when selected

I need help with accordion that keeps "li" open to show selected menu in every page loading. The code I have keep on closing everytime I clicked a link. I need a code that will keep "li" open to show the active link. PLEASE help me. here is my code:

<ul id="accordion">
    <li><a href="#">Individual Inventory</a></li>
    <ul class="submenu">
        <li><a href="?page=records" title="">Individual Inventory Records</a></li>
        <li><a href="?page=repo" title="">Records</a></li>
    </ul>

    <li><a href="#">Exit Interview</a></li>
    <ul class="submenu">
        <li><a href="?page=ir">Inventory Records</a></li>
        <li><a href="?page=sweet">sweet</a></li>
    </ul>
</ul>

:css

#accordion {

    list-style: none;
    padding: 0 0 0 0;
    width: 250px;
}
#accordion li{
    display: block;
    background:#024b9a url(../images/img05.jpg) repeat;
    margin: auto;
    cursor: pointer;
    padding-top:10px;
    list-style: circle;
    color:#ffffff;
    text-align: center;
    height:5px;
}
#accordion li:hover{
    opacity:0.8;
    filter:alpha(opacity=80);
}
#accordion li:active{
    opacity:0.8;
    filter:alpha(opacity=80);
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
    display: none;

}
#accordion ul li{

    background:#ffffff;
    font-weight: normal;
    cursor: auto;
    padding: 5px 0 10px 7px;
    height:10px;
}
#accordion ul li:hover{
    background:url(../images/img052.jpg) repeat;
}
#accordion a {
    text-decoration: none;
    color;#000;
    padding:10px;
    font-family:Verdana, Geneva, sans-serif;
}
#accordion a:hover {
    color;#000;
}

jquery:

$("#accordion > li ").click(function() {        
  if(false == $(this).next().is(':visible')) {
    $('#accordion > ul').slideUp(300);
  }
  $(this).next().slideToggle(300);
});

Upvotes: 0

Views: 1110

Answers (2)

Jeny
Jeny

Reputation: 84

This opens all accordion li / tabs open on each page load. So that you can see active links

var activateAccord = function() {

$('ul.submenu').each(function () {
    $(this).prev('li')
    .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
    .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
    .next().slideToggle();
  })

}

activateAccord();

Upvotes: 0

asymptoticFault
asymptoticFault

Reputation: 4529

Something like this than maybe:

$(function () {

    $("#accordion > li > a:active").parent().next().show();

});

Upvotes: 0

Related Questions