CODEWITHSUNDEEP
javascriptjqueryhtmlshow-hide
Aariba
Aariba

Reputation: 1194

Hide/Show many elements on single click by jQuery

I've code few line of jQuery for Hide/Show many elements on single click and it's working. But problem is; i've many more image class items, so my script going to long, my question is how to simplify or make short my script, i mean any alternatives or any new idea? please suggest.

HTML:

<div id="choose-color">
<span>
 <i class="images-red" style="">Red Image</i>
  <i class="images-blue" style="display: none;">Blue Image</i>
   <i class="images-pink" style="display: none;">Pink Image</i>
 <!-- many many images -->
</span>

 <button class="red">Red</button>
  <button class="blue">Blue</button>
   <button class="pink">Pink</button>

</div>

JS: live demo >

$("button.red").click(function(){
    $(".images-red").show();
    $(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
    $(".images-red, .images-pink").hide();
    $(".images-blue").show();
});
$("button.pink").click(function(){
    $(".images-red, .images-blue").hide();
    $(".images-pink").show();
});

Please suggest for short and simple code of my script. Thanks.

Upvotes: 3

Views: 1923

Answers (7)

Fernando Madriaga
Fernando Madriaga

Reputation: 458

You may try this:

<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>

</div>

JS: see here

$(".colour").click(function(){
    var colors = ["red", "blue", "pink"];
    for (i = 0; i < colors.length; i++) {
        if($(this).hasClass(colors[i])){
            $(".images-"+colors[i]).show();
        }else{
            $(".images-"+colors[i]).hide();
        }
    }
});

Upvotes: 0

Matt Dalzell
Matt Dalzell

Reputation: 825

It would make sense to have all images share a single class (.image for example). Then you just use a shared class for the button and the image; in this example I used the color name. Now, when any button is clicked, you can grab the class name of the image you want to show.

Give this a try:

$("button").click(function(){
    $(".image").hide();
    var className = $(this).attr("class");
    $("." + className).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>

</div>

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You can do it by adding just a common class to those buttons,

var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
    iTags.hide().eq($(this).index("button.button")).show();
});

The concept behind the code is to bind click event for the buttons by using the common class. Now inside the event handler, hide all the i elements which has been cached already and show the one which has the same index as clicked button.

DEMO

For more details : .eq() and .index(selector)

And if your elements order are not same, both the i and button's. Then you can use the dataset feature of javascript to over come that issue.

var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
    iTags.hide().filter(".images-" + this.dataset.class).show()
});

For implementing this you have to add data attribute to your buttons like,

<button data-class="red" class="button red">Red</button>

DEMO

Upvotes: 6

T J
T J

Reputation: 43166

You can do the following using data-* attributes, because when you have more elements of the same color, using index of the button won't work. And simply using the whole class attribute won't work if you have to add more classes to the button in future.

$("button").click(function() {
  var color = $(this).data('color');
  var targets = $('.images-' + color);
  targets.show();
  $("span i").not(targets).hide();
});
.hidden {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
  <span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
  <br/>
  <br/>
  <button data-color="red">Red</button>
  <button data-color="blue">Blue</button>
  <button data-color="pink">Pink</button>

</div>

Upvotes: 1

Elliott
Elliott

Reputation: 2205

You're making future extensibility a little difficult this way due to relying on class names but this would solve your immediate need: 

<div id="myImages">
  <i class="images-red" style="">Red Image</i>
  <i class="images-blue" style="display: none;">Blue Image</i>
  <i class="images-pink" style="display: none;">Pink Image</i>
  <!-- Many many image -->
</div>
<div id="myButtons">
  <button class="red">Red</button>
  <button class="blue">Blue</button>
  <button class="pink">Pink</button>
</div>

$("#myButtons button").click(function(){
        var color = $(this).attr("class");
    var imageClass = ".images-"+color;
    $('#myImages').children("i").each(function () {
        $(this).hide();
    });
    $(imageClass).show();
});

Here's a JSFiddle

Edit: Note how I wrapped the buttons and images in parent divs to allow you to isolate just the buttons/images you want to work with.

Upvotes: 1

Mike B
Mike B

Reputation: 2784

I know this might not be the prettiest solution, but it should do the job.

$("button").click(function(){
    var classname = $(this).attr('class');
    $("#choose-color span i").hide();
    $(".images-"+classname).show();
});

Upvotes: 1

Fran&#231;ois Dupont
Fran&#231;ois Dupont

Reputation: 424

This works

  $("#choose-color button").click(function(){
        var _class = $(this).attr('class');
        $("#choose-color i").hide();
        $(".images-"+_class).show();
    });

https://jsfiddle.net/455k1hhh/5/

Upvotes: 1

Related Questions