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.