# Multiple buttons and javascript

**URL:** <https://forum.kirupa.com/t/multiple-buttons-and-javascript/315626>\
**Category:** web dev\
**Created:** [October 30, 2010, 4:46pm UTC](https://forum.kirupa.com/t/multiple-buttons-and-javascript/315626 "2010-10-30T16:46:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoobKillerSM](https://avatars.discourse-cdn.com/v4/letter/n/b9bd4f/32.png) [@NoobKillerSM](https://forum.kirupa.com/u/NoobKillerSM)\
**Post date:** [October 30, 2010, 4:46pm UTC](https://forum.kirupa.com/t/multiple-buttons-and-javascript/315626/1 "2010-10-30T16:46:46Z")

</div>

Hi,

I am willing to place a button which, after it is pressed, displays other elements, so far I got that done without any problem. The hard part starts if I want to have few of those buttons and each of them to display/hide other content.

My javascript code which hides/shows content is:

```auto
<script>
function fade(div_id, button) {

    if(button.value == 'Show content') {
        $('#'+div_id).fadeIn('slow');
        button.value = 'Hide content';
    }
    else {
        $('#'+div_id).fadeOut('slow');
        button.value = 'Show content';
    }
}
</script>

```

The code for my button is simple input tag:

```auto
<input type="button" onclick="fade('content-div-id', this)" value="Hide content" class="content-button">

```

The problem is that the value of buttons change to the same as others after it is pressed, how should I modify the code above to make it work for multiple buttons?

PS. I am attaching html file to illustrate my problem.