accordion effect_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-27 18:16 出处：网络

Th开发者_运维技巧ere are so many \'huge\' accordion scripts around and I am confused. Can anyone suggest me a simple code to turn this list into a accordion panel. To start with, only the \'Sports\'

相关专题：jquery

Th开发者_运维技巧ere are so many 'huge' accordion scripts around and I am confused.

Can anyone suggest me a simple code to turn this list into a accordion panel. To start with, only the 'Sports' list will be visible. Then when the user clicks on either Technology or Latest, the Sports will hide and the one clicked will show up and so on..

<ul id="accordion">
    <li>Sports</li>
    <ul>
        <li><a href="#">Golf</a></li>
        <li><a href="#">Cricket</a></li>
        <li><a href="#">Football</a></li>
    </ul>
    <li>Technology</li>
    <ul>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
    <li>Latest</li>
    <ul>
        <li><a href="#">Obama</a></li>
        <li><a href="#">Iran Election</a></li>
        <li><a href="#">Health Care</a></li>
    </ul>
</ul>

For something quick and simple you can use slideToggle() or slideUp() slideDown()

You might want to clean up your HTML so that the ULs are properly nested:

<ul id="accordion">
    <li>
        <h1>Sports</h1>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>

    <li>
        <h1>Technology</h1>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>

    <li>
        <h1>Latest</h1>
        <ul>
            <li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
</ul>

Then you could do something like this:

$(document).ready(function() {
  // initialise
  $('ul#accordion > li > ul').hide();
  $('ul#accordion > li:first-child > ul').show();

  // accordion
  $('ul#accordion > li > h1').click(function() {
     if($(this).next().css('display') == 'none') {
         $('ul#accordion > li > ul').slideUp();
         $(this).next().slideDown();
     }
  });
});

The jquery UI package comes with accordion functionality, if you're up to using that (UI is a pretty standard library for jquery, if a bit heavy-handed for some needs).

This answer uses the OP's original data and fulfills his request for the first title to be open at the start (see notes in code below). See fiddle here: jQuery-ui accordion example on JSFiddle

I used the example from here: jQuery-ui accordion docs

    <!DOCTYPE html>
    <html>
    <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">     </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
    $(document).ready(function() {
$("#accordion").accordion({
    clearstyle: true,
collapsible: true, //allow accordion to be completely collapsed showing only the headers.
    active: 0 //open first accordion (Sports) on load
        });
    });
    </script>
    </head>
    <body style="font-size:62.5%;">

    <div id="accordion">
    <h3><a href="#">Sports</a></h3>
    <div>
    <ul>
        <li>Golf</li>
        <li>Cricket</li>
        <li>Football</li>
    </ul>
</div>
<h3><a href="#">Techology</a></h3>
<div>
    <ul>
        <li>iPhone</li>
        <li>Facebook</li>
        <li>Twitter</li>
    </ul>
</div>
<h3><a href="#">Latest</a></h3>
<div>
    <ul>
        <li>Obama</li>
        <li>Iran Election</li>
        <li>Health Care</li>
    </ul>
</div>
    <h3><a href="#">Attribution</a></h3>
<div>
    <p><a href="http://stackoverflow.com/questions/2657469/accordion-effect">In answer to Stack Overflow question 2657469</a></p>
   </div>
   </div>
   </body>
   </html>

accordion effect

精彩评论

关注公众号

热门标签

图文推荐

accordion effect

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：