CODEWITHSUNDEEP
javascriptjquerybuttonhideshow
user1301737
user1301737

Reputation: 77

javascript show/hide buttons

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/

Upvotes: 2

Views: 2781

Answers (5)

Jayram
Jayram

Reputation: 11

$(document).ready(function(){
    $("#hide").click(function(){ //#hide use your element id
        $("p").hide();            // use your element to hide
    });
    $("#show").click(function(){ //#show use your element id
        $("p").show();              // use your element to show
    });     
});

This is just basic way

Upvotes: 1

jatrim
jatrim

Reputation: 715

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) {
                current.removeClass("active").hide();
                next.addClass("active").show();
            }
        });    
    });    
})(jQuery);

Upvotes: 0

Trevor
Trevor

Reputation: 9578

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

Upvotes: 0

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

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/

Upvotes: 1

nunespascal
nunespascal

Reputation: 17724

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.

Upvotes: 0

Related Questions