javascript - Can I showhide part of div? - Stack Overflow

admin管理员组

文章数量:1399901

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:

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

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 26, 2012 at 14:59 DrMtotheac asked Nov 26, 2012 at 14:11 DrMtotheacDrMtotheac 12733 silver badges88 bronze badges 2

• @Caribou Well we were quite helpful anyway... See below... – jtheman Commented Nov 26, 2012 at 14:38
• @jtheman lol - I should have looked I need a break I think :) – Caribou Commented Nov 26, 2012 at 14:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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.

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

​

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>

本文标签： javascriptCan I showhide part of divStack Overflow