Show only one div based on data attribue

Question

I have read other questions in stackoverflow , But I am unable to make it working.Below Is the html and javascript I tried

    <div class="container wrapit" >
    <div id="one" style="display:none">
    one
    </div>
    <div id="two" style="display:none">
    two
    </div>
    <div id="three" style="display:none">
    three
    </div>
    </div>


    <div data-id="one" class="toggler">
    button1
    </div>

    <div data-id="two" class="toggler">
    button2
    </div>
 <div data-id="three" class="toggler">
    button3
    </div>

When I click button1 it must show only id one based on its data-id attribute and When I click button2 it must show ony id two and should hide others. Below is the code I tried

$( ".toggler" ).click(function() {

 var id = $(this).data('id');
   var $div = $('.wrapit > #'+ id );
    $div.show();

});

Here is fiddle -https://jsfiddle.net/zm631u6o/1/

NOTE : This is not duplicate because , right now it shows both one and two , I wanna hide other elements and show only one at a time

Typo: you're appending a string value, not the `id` variable's value. `var $div = $('#' + id);` — Rory McCrossan, Feb 22 '16 at 07:50
sorry for the typo , Now its fixed . main problem is toggling the DIVS — Vishnu, Feb 22 '16 at 07:52
Why is it duplicate ? I selected the Jquery ID , I just wanna know how to toggle others — Vishnu, Feb 22 '16 at 07:52
Once you've fixed the typo, use `toggle()` instead of `show()` — Rory McCrossan, Feb 22 '16 at 07:56
I have used toggle , But problem is when i click button2 , it should not show ID one — Vishnu, Feb 22 '16 at 07:57
@Arun P Johny , seriously ? you have marked duplicate with unrelevant question — Vishnu, Feb 22 '16 at 08:01
plese check the fiddler https://jsfiddle.net/zm631u6o/2/ , this is what you are looking for? — shu, Feb 22 '16 at 08:07
@Vishnu when I marked as duplicate, you had `var $div = $('.wrapit >'+'#'+'id');` — Arun P Johny, Feb 22 '16 at 08:08
Yea still the question you marked as duplicate is completely irrelevant to what my question is ! — Vishnu, Feb 22 '16 at 08:48

score 2 · Accepted Answer · answered Feb 22 '16 at 08:14

Do you want something like

$(".toggler").click(function() {
$('.container div').hide(); //JUST ADD THIS LINE
  var id = $(this).data('id');
  var $div = $('.wrapit > #' + id);
  $div.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapit">
  <div id="one" style="display:none">
one
  </div>
  <div id="two" style="display:none">
two
  </div>
<div id="three" style="display:none">
three
  </div>
</div>


<div data-id="one" class="toggler">
  button1
</div>

<div data-id="two" class="toggler">
  button2
</div>
<div data-id="three" class="toggler">
  button3
</div>

If changes are there then inform me..

Show only one div based on data attribue

1 Answers1