How to toggle the <div> using data(data-class) attribute

Question

am very new to j query, I want to toggle the div using data(data-class) attribute rather than using separate class name for div .. please help me ... thanks in advance

<div id="click" class="toggle">Toggle </div>
<div id="slide" data-class="slide" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div class="toggle">Toggle </div>
<div data-class="slide1" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div class="toggle">Toggle </div>
<div data-class="slide2" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<script>
        $(document).ready(function(){
    $( ".toggle" ).click(function() {
        var tog = $(this).("data-class");
    $("."+tog).slideToggle( "fast", function() {
      // Animation complete.
    });
  });

  });

</script>

Answer 1

You can use attr() or data() to get the value of your data attribute, so you can use:

var tog = $(this).attr("data-class");

or:

var tog = $(this).data("class");

instead of:

var tog = $(this).("data-class");

---

After going through your HTML markup, you need to change your HTML to:

<div id="click" data-class="slide" class="toggle">Toggle</div>
<div class="slide" id="slide" data-class="slide" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div data-class="slide1" class="toggle">Toggle</div>
<div class="slide1" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div data-class="slide2" class="toggle">Toggle</div>
<div class="slide2" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>

You need to add data-class attribute on the .toggle div, not for the hidden div. Also you need to add class for your hidden div respectively.

Fiddle Demo

Answer 2

You should be using .attr('data-class') or .data('class');..

here is your updated code:

  $(document).ready(function(){
     $( ".toggle" ).click(function() {
         $(this).children(':first').slideToggle( "fast", function() {
             // Animation complete.
         });
      });
  });