Can I show/hide part of div?

Question

I'm creating sidebars including tables for a website.

I would like:

• only five rows to show at first
• by clicking a link in at the bottom of the sidebar 15 rows will be shown and the link text will change.
• by clicking the link again when the div is fully open the sidebar only shows the first five again and the link text changes back to the first one again.

So I'm looking for some kind of toggle div function to do this for me, but I want a part of the div to be always visible.

Here is a screenshot of my sidebars: http://cl.ly/image/390J2u2z1W1Z

Is there anyone who have a good solution to my problem?

Answer 1

Add a class to the rows you dont want to show first

<tr class="toggle"> ..... </tr>

CSS:

tr.toggle { display: none; }

Sidebar link:

<a href="#" id="toggle">Toggle</a>

then use jQuery toggle() to toggle on and off

<script>
  $(function(){
     $('a#toggle').click(function(e)
     {
         e.preventDefault();
         $('tr.toggle').toggle();
     });

  });
 </script>

Answer 2

Just check this demo

JS:

$('.js_toggle').on('click', function(event) {
    $('table').toggleClass('full-table');

    event.preventDefault();
});​

HTML:

<table>
    <tr>
        <td>tr01</td>
        <td>tr02</td>
    </tr>
    …
    <tr>
        <td>tr01</td>
        <td>tr02</td>
    </tr>
</table>

<a href="#" class="js_toggle">toggle_table</a>

CSS:

table tr:nth-child(n+6) {
    display: none;
}

table.full-table tr {
    display: block;
}
​

​

Answer 3

It all depends on what is really your content, but simpliest would be to alter div height to match your requirements or use two divs (one for "shortened" version, other for "full" and show/hide them accordingly.

Answer 4

Separate your main <div> into multiple, smaller <div>s... then just hide the entirety of your internal <div>s. With jQuery's .toggle or .hide/.show functions.