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

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

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

Well, I don't believe that PHP is really the answer you want here. This feels like something better suited for the front-end. Take a look at Google results for 'javascript accordion' that will detail how you can best do this.

That being said you could do this with strictly CSS, however it is CSS3 and might not be widely supported yet. Could check out this tutorial/article about the :target pseudo-class.

You could do this in PHP and CSS by setting up your script to respond to a URL parameter that toggles an active/inactive class on the menu fragments you want to hide or show. Then its a simple matter of writing the CSS rules to show/hide based on the class. However keep in mind that this might mean a round trip to your server and back just to collapse a menu.

PHP is a Server-side language what you're looking for is a client-side solution. Mootools has a Slide function which you could use very easily or you could try a JQuery solution Here's a list have fun :)

You can quite easily do it with JS.

First change your base HTML to look like

<ul>
 <li id="myli1">
  text1 here    
 </li>
 <li id="myli2">
  text2 here    
 </li>
 <li id="myli3">
  text3 here        
 </li>
 <li id="myli4" style="display:none;">
  text4 here        
 </li>
 <li id="myli5" style="display:none;">
  text5 here        
 </li>
 <li id="myli6" style="display:none;">
  text6 here        
 </li>
 <li id="myli7" style="display:none;">
  text7 here        
 </li>
</ul>

Then include a function like

function ShowMyLi(fromnr,displaystyle) {
  var o=document.getElementById("myli"+fromnr);
  if (!o) return;
  o.style.display="block";
  var cmd="ShowMyLi("+(fromnr+1).toString()+",'"+displaystyle+"');";
  window.setTimeout(cmd,150);
}

• On the "show more" button do onclick="ShowMyLi(4,'block');"
• On the "hide more" button do onclick="ShowMyLi(4,'none');"