New Topic/Question
Reply
<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('.myButton').click(function(){
if ( this.value == 'collapse' ) {
// if it's open close it
open = false;
this.value = 'expand';
$(this).next("div.container").hide("slow");
}
else {
// if it's close open it
open = true;
this.value = 'collapse';
$(this).next("div.container").show("slow");
}
});
});
</script>
</head>
<body>
<?php
for($i=0;$i<=3;$i++)
{
echo"<div class='main' style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%; '>
<b> sometext:-</b><a href='#'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>
<input type='button' value='expand' class='myButton' target='".$i."' style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font- size:15px;' >$i";
echo "<div class='container' style='display:none;background:white; '>
<b> sometext:-</b><a href='#'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>
</div>";
echo "</div><br><br>";
}
?>
</body>
</html>
when we click a button two events are held
1:- all other main divs and container divs are hidden leaving the one div whose button has been pressed
2:- the div whose button is pressed in that both the main div and container div are shown and the text of the button is changed to collapsed
when we click the button again the events held are
1:- all the main divs are shown and container divs are hidden
2:- text of the button is changed to expand
out of the above mentioned events many have been achieved . Problem is we are not able to hide rest of the main div leaving the current main div whose button has been pressed
MultiQuote
| 