• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 132
  • Last Modified:

jQuery how to toggle multiple panels (accordion?)

I'm trying to achieve what I thought would be something simple:

Category1          Category2             Category3

When I click on Category 1, it will expand its hidden panel to show optoins..

Category1          Category2             Category3
opt1
opt2

When I click on Category2 (or 3), Category1 closes and Category 2 opens.

Category1          Category2             Category3
                             option1
                             option2

Please help!
0
Montoya
Asked:
Montoya
2 Solutions
 
Nathan RileyFounderCommented:
Not styled exactly as you want, but here's the method.

https://jsfiddle.net/shunkLgs/

HTML:
<ul>
    <li id="cat1" style="display:inline;">Cat 1</li>
    
    
    <li id="cat2" style="display:inline;">Cat 2</li>
    
    
    <li id="cat3" style="display:inline;">Cat 3</li>
    
</ul>
<ul>
    <li id="cat1item" style="display:none;">hidden1</li>
    <li id="cat2item" style="display:none;">hidden2</li>
    <li id="cat3item" style="display:none;">hidden3</li>
</ul>

Open in new window


jQuery:
$( "#cat1" ).click(function() {
  $( "#cat1item" ).show("slow");
    $( "#cat2item" ).hide();
    $( "#cat3item" ).hide();
});

$( "#cat2" ).click(function() {
  $( "#cat2item" ).show("slow");
    $( "#cat1item" ).hide();
    $( "#cat3item" ).hide();
});

$( "#cat3" ).click(function() {
  $( "#cat3item" ).show("slow");
    $( "#cat1item" ).hide();
    $( "#cat2item" ).hide();
});

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
What you are looking fro, as far as I can see with the layout you have, is the Tab Panel.
https://jqueryui.com/tabs/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now