I'm currently working on a page that has a special feature - when you click on a specific text, a hidden div will appear, and when you click on the same text again, the div disappears.
Below is the HTML code I have written:
<div id="description" class="tab-pane fade">
<div class="faq-row">
<a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a>
</div>
<div class="col-md-12 faq-row-content">
<ul>
<li>
LR's spacious apartments provide ample room for work and play.
</li>
<li>
Guests can access high speed internet and cable television from every room.
</li>
</ul>
</div>
<div class="faq-row">
<a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a>
</div>
<div class="col-md-12 faq-row-content">
<ul>
<li>
LR's spacious apartments provide ample room for work and play.
</li>
<li>
Guests can access high speed internet and cable television from every room.
</li>
</ul>
</div>
</div>
My goal is to make it so that clicking on the first link makes the first div appear and disappear, while clicking on the second link does the same for the second div.
Currently, clicking on any link doesn't do anything.
Here is the jQuery code I have used:
$(document).ready(function(){
$(".faq-row-handle").click(function(){
$(".faq-row-content").slideToggle();
});
});