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?

@jtheman lol - I should have looked I need a break I think :) — Caribou, Nov 26 '12 at 14:39

score 5 · Answer 1 · answered Nov 26 '12 at 14:13

5

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.

answered Nov 26 '12 at 14:13

Marcin Orlowski

72,056
11
123
141

score 1 · Answer 2 · answered Nov 26 '12 at 14:13

1

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.

answered Nov 26 '12 at 14:13

Darrrrrren

5,968
5
34
51

jtheman · Answer 3 · 2012-11-26T17:30:27.750

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>

edited Nov 26 '12 at 17:30

answered Nov 26 '12 at 14:15

jtheman

7,421
3
28
39

Sorry, but changing to slideToggle() doesn't make any difference, it's still the same. Any clue why? Here is the demo: http://jsfiddle.net/matmuchrapna/ZAtX8/5/ – DrMtotheac Nov 26 '12 at 16:26
Ahh. Its due to the fact that table rows doesn't have a default height. See http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row So easiest if you make your table out of DIVs instead. – jtheman Nov 26 '12 at 17:32

score 1 · Answer 4 · answered Nov 26 '12 at 14:26

1

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;
}

answered Nov 26 '12 at 14:26

Vladimir Starkov

19,264
8
60
114

That was even better than my solution! – jtheman Nov 26 '12 at 14:37
I thought the default display-mode for a tr was display: table-row ? (not block) – jtheman Nov 26 '12 at 14:41
Thanks! Is there a way to make the the hidden stuff to slide down on toggle? I'm also looking for a way to change the link text on click, do you know have I can accomplish that? Here is a screenshot of my sidebars: http://cl.ly/image/390J2u2z1W1Z Thanks again! – DrMtotheac Nov 26 '12 at 14:47
In my example above you could just use slideToggle() instead of toggle() – jtheman Nov 26 '12 at 14:57

Can I show/hide part of div?

4 Answers4