Show Hide Table/Tables in Divs with button

(Callum Gorringe) #1

Hi all

 

Had a search on forum but couldn't find anything relating to showing and hiding tables.  Basically what we are trying to do it make a tables contents show up if you click a button, and then once you click the button it'd be nice to give the option to hide again.

 

We have gotten partway through testing in JS fiddle but the problem is once its switched to JQuery 2x (edge) the button just disappears!  Is there an easier/better way to do the code than how we've been trying!

 

We've used something like this in the javascript to make the button appear but not sure why it doesnt work in the edge jquery!

 

$("#myButton").toggle(function(){     $("#content").slideDown();
    $(this).val("Slide up ↑");
},function(){
    $("#content").slideUp();
    $(this).val("Slide down ↓")
}

 

Hopefully someone can shed some light, thanks heaps.

(Nic Hubbard) #2

Can you show me the JS Fiddle page you used so that I can edit it?

(Callum Gorringe) #3

G'day Nic thanks for the quick reply.  I knew I should have posted it!  Essentially we want it to do something like this.

 

http://jsfiddle.net/amosrivera/AYWku/

 

The biggest issue we have faced is the button disappearing altogether when the JQuery is switched to anything above 1.8.  (edited)  Is it easier to just have 2 buttons, i.e an expand or collapse?  Thanks mate.

(Nic Hubbard) #4

G'day Nic thanks for the quick reply.  I knew I should have posted it!  Essentially we want it to do something like this.

 

http://jsfiddle.net/amosrivera/AYWku/

 

The biggest issue we have faced is the button disappearing altogether when the JQuery is switched to anything above 1.8.  (edited)  Is it easier to just have 2 buttons, i.e an expand or collapse?  Thanks mate.

 

So, the .toggle() function that you are trying was deprecated in jQuery 1.7, and no longer works that way. So, you could do something like this:

$('#myButton').click(function() {
    var c = $('#content');
    var b = $(this);
    if (c.hasClass('toggled')) {
        c.slideUp().removeClass('toggled');
        b.val("Slide down ↓");
    } else {
        c.slideDown().addClass('toggled');
        b.val("Slide up ↑");
    }
});
 

http://jsfiddle.net/AYWku/857

(Callum Gorringe) #5

Thanks Nic legend! Exactly what I was after!