Question

I’m trying to do a simple code (so that I don’t have to copy and paste it to multiple buttons) where are any number of buttons where their values are simple as “Home”, “Contact”, “Register” and stuff like that. So whenever I click that button will make a hidden div to be shown at the DIV (content area) element.

So here is what I mean:

(hiddenstuff123 id=home) (hidden321stuff id=register) (hid22st id=contact)

< Home >< Contact >< Register > INPUT Buttons

 

DIV Area

Click “Home” button and hiddenstuff123 will show on the DIV area, you press “Contact” and hid22st shows, and so on.

---

So JavaScript will receive a GenericButton click, and will take the BUTTON Value and just Generic Select a div with that id (button value) and appendTo() the “DIV Area”.
So I’ll show the code I’ve got already.

$('input:button').click(function(){
 var contentName = $(this).val().toLowerCase();
 $(contentName).appendTo('#pageContent');
});

The only problem so far is that he isn’t selecting the especific hidden div according to the button value.

Thanks and sorry for my bad english.

Answer 1

Assuming you have assigned <div id="home">, <div id="contact">, etc, this should work:

$('input:button').click(function(){
    var contentName = $(this).val().toLowerCase();
    $('#' + contentName).appendTo('#pageContent');
})