jquery - How to expand collapse reviews -
i have reviews products, want show reviewers name if user clicks name, whole review expands.
this how ive tried doing it
this snippet page
"<article class='reviews'>"; $q = mysqli_query($link,"select *from reviews product_id = '$pid' , status = '1' order id desc "); if (!mysqli_num_rows($q)){ echo"there no reviews product yet";} else{ echo"<article class='reviewslatest'>", "<article class='reviewslatestheading'>latest customer review</article>"; while($row = mysqli_fetch_array($q)){ echo "<article class='reviewsuser'>review - {$row['name']}</article>"; echo "<article class='reviewsinfo'>", nl2br ($row['info']), "</article>";}} echo"</article>", "</article>";
and jquery ive been trying use
jquery(document).ready(function() { $(".reviewsuser").click(function () { $header = $(this); $content = $header.next(); $content.slidetoggle(500, function () { $header.text(function () { return $content.is(":visible") ? "collapse" : "expand"; }); }); }); });
at minute nothing
this start consider - fiddle.
your question contains php code use move data db client, suggest focus on structure of dom.
so fiddle used php code "create" theoretical dom (i hope looks want to), styled , added simple jquery command.
the js won't work long page of reviews, modified based on how visualize dom.
js
$('.reviewsuser').on('click', function(){ $('.reviewsinfo').slidetoggle( "slow" ); });
edit: put these lines in header.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Comments
Post a Comment