I have this jQuery in my header:
$(document).ready(function(){
$("h5").click(function(){
$("p").slideToggle();
});
});
and I am fetching data from database. When I clicks on h5 it shows and hides all the paragraphs. I want to show and hide a particular paragraph when I click on h5. This is my PHP:
while($results = mysqli_fetch_array($raw_results))
{
echo "<div style='background-color: #F1F0FF; pading:35px'>";echo"<h5 id=".$results['id'].">".$results['question']."</h5>";echo "<p id=".$results['id']."><span>option A:</span>" .$results['option_a']."<span> <br>option B:</span>".$results['option_b']."<span><br/>option C:</span>".$results['option_c'].
"<span><br>option D:</span>".$results['option_d']."<span><br>option E:</span>".$results['option_e']."<span><br>Correct Ans:</span>".$results['correct_ans'].
"<span><br>FMGE Year:</span>".$results['fmge_year']."<span><br>FMGE Month :</span>".$results['fmge_month']."<span><br>Contributor:</span>".$results['contributor']."</p>";
echo "</div>";
}
Use jQuery .siblings()
to select the matching paragraph:
$(this).siblings('p').slideToggle(); //<- slideToggle is just for example
Like @jeroen said, but different- just require
in css: !writing style in php can be headache
div.content {
background-color: #F1F0FF;
pading:35px
}
Html format
<div class="content">
<h5>...</h5>
<p>...</p>
</div>
Jquery
$(".content").on("click", "h5", function() {
$(this).parent()
.children('p')
.slideToggle();
});
And there is still other way.