Take the 2-minute tour ×

Hi I have several buttons the first one is a show/hide and it works correctly when it is first clicked on. The second one is next table and when next table is clicked on it should be hiding table 1 and only displaying table 2. Then if the hide button is clicked it should hide both table1 and table2 and currently table 2 still shows when the hide button is clicked. Here is an example of my problem and code: http://jsfiddle.net/zfnx6/27/

share|improve this question
If you're indeed using jQuery, you may want to actually use it. It would help cleaning up your code. –  pimvdb Jun 9 '12 at 18:50
you can write the code by jquery in a more clean way. –  undefined Jun 9 '12 at 18:56
add comment

4 Answers

up vote 1 down vote accepted

I updated your code to behave like you described, the biggest change was to define the outer table as a container for table1 and table2. That way clicking on the top button (Show/Hide) affects both tables at once rather than having to mess with if statements for both tables.

There were some parameters changed with the buttons in the HTML, and the second button became a toggle for both tables. If you will use more than two tables, the current approach won't be too effective.

Demo http://jsfiddle.net/zfnx6/41/

share|improve this answer
thanks it works great –  user1301737 Jun 9 '12 at 19:13
what would i have to do to add the back and next buttons to be hidden with the associated table? so that if i wanted the back button disabled when table1 is shown and the next button disabled when table2 is shown? –  user1301737 Jun 10 '12 at 0:09
I don't really understand. There's only one button, "nextbt2", whose label/value is toggled between "back" and "next". If you added a new button you can use the style visibility and display like it's done with the tables. –  Tina CG Hoehr Jun 10 '12 at 0:16
it doesn't work in IE8 it gives the error Object doesn't support this property or method at the line container = document.getElementById("container"); –  user1301737 Jun 11 '12 at 23:32
I'm on an old computer without IE8. Maybe it doesn't like a table having the id container? Try adding a div with id=container surrounding that table. –  Tina CG Hoehr Jun 11 '12 at 23:43
add comment

My own variation: http://jsfiddle.net/zb9Tt/

I made a couple changes to your HTML, but mostly this is about the javascript. The following is some pretty light jQuery that will do what you want for an unlimited group of toggleable objects on the page. The active class is used to show the currently selected "tab".

 (function ($) {

    $(document).ready(function () {
        $("#togglebutton").bind("click", function () {
           $(".active, #nextbt").toggle();

        $("#nextbt").bind("click", function () {
            var current = $(".active"); 
            var next = $(".active + .toggleable");

            if (next.length) {
share|improve this answer
add comment

If you're interested in using jQuery it would clean up your code a lot. Here's an example: http://jsfiddle.net/zfnx6/43/

share|improve this answer
add comment

Take a look at jquery ui accordian.

If you want only one table showing at a time, you may want to consider using this.

In your fiddle, you are not using jquery. Showing and hiding elements in jquery is very easy, and reduces your code quite a bit.

share|improve this answer
add comment

Your Answer


