扩展ul li列表底部的accordion / link

Question

I have a bullet list as below:

<ul>
 <li>
  text1 here    
 </li>
 <li>
  text2 here    
 </li>
 <li>
  text3 here        
 </li>
 <li>
  text4 here        
 </li>
 <li>
  text5 here        
 </li>
 <li>
  text6 here        
 </li>
 <li>
  text7 here        
 </li>
</ul>

I only show the f1rst 3 bullets, but have a link at the bottom to show the rest if clicked (an accordion type effect). Ideally I would also have a close link to compress it again after it had been expanded.

What is the best way to do this with PHP & can I do this just with CSS?

Thanks

Answer 1

Group link which you want to be hidden in Ex.

<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li class="hidden">
 <ul>
  <li>Text 4</li>
  <li>Text 5</li>
  <li>Text 6</li>
 </ul>
</li>

And use jQuery to attach accordion to it

jQuery(document).ready(function(){
    $('a#trigger').click(function() {
        $('li ul.hidden').next().toggle('slow');
        return false;
    });
});

Of course you have to give display: none; to .hidden class http://docs.jquery.com/UI/Accordion