CODEWITHSUNDEEP
jqueryjquery-ui
Dirty Bird Design
Dirty Bird Design

Reputation: 5533

How to make jQuery UI accordion toggle

Accordions themselves are easy enough to toggle, I had to go with jQuery's UI accordion because of the ease of incorporating bookmarkable links. At this point I can either get an accordion effect (from scratch) to toggle with no bookmarkable links, or get the bookmarkable links with the UI and no toggling. I'd like to be able to collapse all accordion content, that is if you click the trigger once it expands - the second click would close it. Here is what I have:

$(function() {
    //basic accordion settings
    $('#accWrap').accordion({
        active: false,
        alwaysOpen: false,
        autoHeight: false,
        navigation: true,
        collapsable: true,
        header: '.accButton'
    });

    //attempt at toggling - does not work correctly
    //$('.accButton').click(function() {
    //$(this).next().toggle();
    //return false;
    //}).next().hide();

    //bookmarkable function
    $(".accButton").click(function(event){
      window.location.hash=this.hash;
    });
});

Anyone see anything obviously wrong or a way I can incorporate the toggle functionality? As always, I appreciate the help!

thx

Upvotes: 0

Views: 8654

Answers (3)

yogoo
yogoo

Reputation: 81

That's an old topic but since I was looking for the answer myself and found it in the jQuery UI accordion doc:

 <script>
    $(function() {
        $( "#accWrap" ).accordion({
            collapsible: true
        });
    });
 </script>

"collapsible" is misspelled in your code, it's missing the "i".

Upvotes: 8

Ahlqvist
Ahlqvist

Reputation: 1

Hi I'm not sure if this is what your trying to achieve. But this is what I use..

is't snatched from here 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".hidebox_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>
</head>
<body>
<div class="msg_head">
click me</div>
<div class="msg_body">
alksdjf löaskdjf ölaskjdöflkjas dlfkj asödlk
</div>
</body>
</html>

Upvotes: 0

Kevin
Kevin

Reputation: 744

Looks like you misspelled "collapsable". Try spelling it "collapsible" with an "i".

Upvotes: 0

Related Questions