jQuery - Fading Different Elements In and Out On Button Click

Question

I'm trying to create a few buttons that make a box appear depending on which button is clicked. I'm doing this by giving each box it's own class and passing an argument to a function to identify which box is meant to be targeted. I'm then assigning this function to each button's onclick attribute on the page (I know I should probably attach the event handler in a separate file). Here is the function:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

The html:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

This function doesn't work however. Firstly, the this keyword doesn't seem to be targeting the button because the html of the button doesn't change on click. However, when I replace the this keyword with the class of the button it works fine.

Secondly, the function fades the boxes in fine but then does not hide them if I click the button again.

I'm stuck so any help would be appreciated! Thanks.

Answer 1

Solution 1 (all jQuery):

The cleanest way to do this is to stick with jQuery for the click handling. You're already using jQuery for the fades, why not utilize it for binding the clicks? Try this:

jsFiddle

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>

$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

Note: If you want the faded out boxes to retain their place in the document, try using fadeTo() instead.

Solution 2 (mixed):

However, if you do need to use the onclick attribute to bind the click handler as you've shown in your example, you can do it like this:

jsFiddle

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>

function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};

Answer 2

http://jsfiddle.net/fVENv/5/

The best way that I can see to do this is to add some hidden text with jquery on page load, and then toggle a class on click (as well as a fade toggle).

the html:

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

the jquery:

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

the css:

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }