I have an html page and I want to show and hide content on button click.
HTML:
<div class="wpb_wrapper">
<p>
<button class="learn-more">Learn More</button>
<button class="learn-more">Learn More</button>
<button class="learn-more">Learn More</button>
<button class="learn-more">Learn More</button>
</p>
<p class="hide_paragraph" id="p1" style="display: none;">First paragraph</p>
<p class="hide_paragraph" id="p2" style="display: none;">Second paragraph</p>
<p class="hide_paragraph" id="p3" style="display: none;">Third paragraph</p>
<p class="hide_paragraph" id="p4" style="display: none;">Fourth paragraph</p>
</div>
Also my function
$(document).ready(function () {
$('.wpb_wrapper p .learn-more').click(function(){
$('.wpb_wrapper p .hide_paragraph').hide();
$('#' + $(this).attr('paragraph_id')).show();
});
});
But it doesn't work
$(this).attr('paragraph_id')).show();
no such thing