I create this code to show and hide div this code work but when i use it with php not work correctly when i click show for the first div he show me the div but when i click the second he show me the first not the second how to solve this?
include("connect.php");
$sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
echo'<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
echo"</tr></thead><tbody>";
while($row=mysqli_fetch_array($sql)){
$title=$row['db_title'];
$code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener"><a href="#1" name="1">Show Code</a></div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";
echo"<td data-title='Code'>";echo"<pre><code class='' ><";?><?php echo $row['db_code'];?><?php echo"></code></pre>";echo"</td>";
}
?>
</body>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
You are creating an html in a loop where you are using fixed id value instead of a dynamic one. This cause an id conflict. So your code will not work as desired. This only takes the first id of the page always.
I have written some dynamic content as per your requirement below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="showContent buttonCode">Show Code</a>';
echo' ';
echo'<a class="hideContent buttonCode">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.showContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').show();
});
$('.hideContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').hide();
});
</script>
Hope this will help you.
If you want it with javascript only then you can do like below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
echo' ';
echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script>
function showbenefit(s) {
if(document.getElementById('benefits-'+s).style.display=='none') {
document.getElementById('benefits-'+s).style.display='block';
}
return false;
}
function hidebenefit(h) {
if(document.getElementById('benefits-'+h).style.display=='block') {
document.getElementById('benefits-'+h).style.display='none';
}
return false;
}
</script>
function show_hide(){ if(document.getElementById('benefits').style.display=='none') { document.getElementById('benefits').style.display='block'; } else if(document.getElementById('benefits').style.display=='block') { document.getElementById('benefits').style.display='none'; } }
<div id="benefits" style="display:block">test</div> <a href="javascript:void" onclick="show_hide() ">Submit</a>
Hello! Hope this help you!
ps you can use .toggle() to show and hide in JQuery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.