Michael Pon Michael Pon - 7 months ago 17
HTML Question

span click add display and hide divs

I have a span which acts like a button to display divs depending on what span you click. Each span has its on div containing its content which is displayed none when onload. The problem is that the span when click doesn't do anything. It should be displaying its content.

HTML

<p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>

<div class="section-1" style="display:none">
ASDQWEXZC
</div>

<div class="section-2" style="display:none">
1234567896
</div>

<div class="section-3" style="display:none">
1234567896
</div>

<div class="section-4" style="display:none">
1234567896
</div><p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>

<div class="section-1" style="display:none">
ASDQWEXZC
</div>

<div class="section-2" style="display:none">
1234567896
</div>

<div class="section-3" style="display:none">
1234567896
</div>

<div class="section-4" style="display:none">
1234567896
</div>


CSS

.productbtn:hover, productbtn:active {
background: #bdc3c7;
color: #fff;
}
.productbtn {
padding: 20px;
background: #ecf0f1;
margin: 10px;
width: 250px;
display: inline-block;
cursor: pointer;
transition: .3s ease all;
}


SCRIPT

$(function(){
$(".btn1").click(function(){
$(".section-1").css("display","block");
$(".section-2, .section-3, .section-4").css("display","none");
});
$(".btn2").click(function(){
$(".section-2").css("display","block");
$(".section-1, .section-3, .section-4").css("display","none");
});
$(".btn3").click(function(){
$(".section-3").css("display","block");
$(".section-2, .section-1, .section-4").css("display","none");
});
$(".btn4").click(function(){
$(".section-4").css("display","block");
$(".section-2, .section-3, .section-1").css("display","none");
});
});


FIDDLE HERE
other Javascript or jquery solutions are acceptable.

Answer

Your code wasn't working because you didn't include jQuery. Try adding that in fiddle it will work.

But why to write that long code when you can do it smartly with a much shorter code:

Here is the jQuery:

$(function(){
    $(".btn-click").click(function(){
        var target = $(this).data("action");
      $("."+target).show().siblings("div[class*=section-]").hide();
  })
}); 

Yea that's it, but, if the HTML is like:

<p class="lead"><span class="productbtn btn1 btn-click" data-action="section-1">FRESH</span><span class="productbtn btn2 btn-click" data-action="section-2">CHILLED</span><span class="productbtn btn3 btn-click" data-action="section-3">FROZEN</span><span class="productbtn btn4 btn-click" data-action="section-4">DRY</span></p>

<div class="section-1" style="display:none">
ASDQWEXZC
</div>

<div class="section-2"  style="display:none">
1234567896
</div>

<div class="section-3"  style="display:none">
1234567896
</div>

<div class="section-4"  style="display:none">
1234567896
</div>
Comments