CODEWITHSUNDEEP
javascripthtmljquerycss
user15069511
user15069511

Reputation:

how to create a jQuery function with less code

I am trying to create a function in jquery. I have three boxes with three buttons. when I click a button then a box will display and other boxes will be hidden. same thing with the other button.

    
 
    $("#one").click(function () {
            $(".box1").show();
            $(".box2").hide();
            $(".box3").hide();
        });

        $("#two").click(function () {
            $(".box2").show();
            $(".box1").hide();
            $(".box3").hide();
        });
        $("#three").click(function () {
             $(".box3").show();
            $(".box1").hide();
            $(".box2").hide();
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box1" style="display:none">box one</div>
<div class="box2" style="display:none">box Two</div>
<div class="box3" style="display:none">box Three</div>


<button id="one" type="button">One</button>
<button id="two" type="button">Two</button>
<button id="three" type="button">Three</button>

my question is that is there any way to achieve my goal without repeat the same code multiple times.

Upvotes: 0

Views: 63

Answers (4)

CodeWalker
CodeWalker

Reputation: 2368

You can simply use the jQuery :not() selector.

$("#one").click(function () {
    $(".box1").show();
    $("div:not(.box1)").hide();
});

$("#two").click(function () {
    $(".box2").show();
    $("div:not(.box2)").hide();
});

$("#three").click(function () {
    $(".box3").show();
    $("div:not(.box3)").hide();
});

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

When any button is clicked, hide all the messages. Then just show the message who's index within its class matches the index of the button within its group.

$("button").click(function (event) {
  // Hide all the messages
  $(".box").each(function(index, box){
    $(box).hide();
  });
  
  // Show just the message that applies
  $($(".box")[$("button").index(event.target)]).show();
});
.hidden { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box hidden">box One</div>
<div class="box hidden">box Two</div>
<div class="box hidden">box Three</div>

<button type="button">One</button>
<button type="button">Two</button>
<button type="button">Three</button>

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

Here's a way that utilizes the ID of your buttons and the ID of your divs to make a dynamic function

$(".button").click(function(e) {
  // set up the object to map stuff
  let obj = {
    'one': 'box1',
    'two': 'box2',
    'three': 'box3'
  };
  $(".box").hide();
  $("." + obj[e.target.id]).show();
});
.box {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box1 box">box one</div>
<div class="box2 box">box Two</div>
<div class="box3 box">box Three</div>


<button id="one" class='button' type="button">One</button>
<button id="two" class='button' type="button">Two</button>
<button id="three" class='button' type="button">Three</button>

Upvotes: 0

Alen.Toma
Alen.Toma

Reputation: 4870

There is a much easer approach to this, You could use Attributes.

Have a look below.

$(".container button").click(function(){
  var className = "."+ $(this).attr("target");
  $(".container div").hide() // hide all divs
  // now view the target one
  $(className).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box1" style="display:none">box one</div>
<div class="box2" style="display:none">box Two</div>
<div class="box3" style="display:none">box Three</div>

<button id="one" target="box1" type="button">One</button>
<button id="two" target="box2" type="button">Two</button>
<button id="three" target="box3" type="button">Three</button>
</div>

Upvotes: 2

Related Questions