To Show Only Selected Div And Hide Rest All Other Divs
Question
There are four main divs i have one button and another container div in the main div. when i press the button the container div is visible and text of the button changes but all the main divs are visible my problem is i want to hide all other divs, the main div whose button is pressed should be visible along with the container div rest other main divs should be hidden . but i am not able to hide other main divs
<!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
2 answers
solution1
2 2014-12-03 06:06:27
You can hide the rest of the containers like
$(document).ready(function() {
var $mains = $('.main');
var $bts = $('.myButton').click(function() {
var $ct = $(this).next("div.container"),
$main = $(this).closest('.main');
if (this.value == 'collapse') {
this.value = 'expand';
$ct.hide("slow");
$mains.not($main).show()
} else {
this.value = 'collapse';
$ct.show("slow");
$mains.not($main).hide()
}
//hide other container elements
$('div.container').not($ct).hide();
$bts.not(this).val('expand');
});
});
$(document).ready(function() { var $mains = $('.main'); var $bts = $('.myButton').click(function() { var $ct = $(this).next("div.container"), $main = $(this).closest('.main'); if (this.value == 'collapse') { this.value = 'expand'; $ct.hide("slow"); $mains.not($main).show() } else { this.value = 'collapse'; $ct.show("slow"); $mains.not($main).hide() } //hide other container elements $('div.container').not($ct).hide(); $bts.not(this).val('expand'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 <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</div> </div> <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 <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</div> </div>
solution2
1 ACCPTED 2014-12-03 06:31:39
$(document).ready(function(){
$('.myButton').click(function() {
var $ct = $(this).next("div.container");
if (this.value == 'collapse') {
this.value = 'expand';
$ct.hide("slow");
$('.myButton').parent().show("slow");
} else {
this.value = 'collapse';
$ct.show("slow");
$('.myButton').not($(this)).parent().hide("hide");
}
});
});
This will hide all other divs
$(document).ready(function() { $('.myButton').click(function() { var $ct = $(this).next("div.container"); if (this.value == 'collapse') { this.value = 'expand'; $ct.hide("slow"); $('.myButton').parent().show("slow"); } else { this.value = 'collapse'; $ct.show("slow"); $('.myButton').not($(this)).parent().hide("hide"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 <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</div> </div> <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 <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</div> </div>
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.
Related Question
Show div that is selected in dropdown and hide other divs using javasccript
Show div when radio button is checked, and hide all the other divs?
Show/Hide the same div and close all other divs
With Dropdown Box Show Only Selected Div's But Show All Divs When No Option Is Selected
I want a certain div show up/be selected when all other divs aren't showing/selected - jQuery
Hide all other divs with the same name on div hover, show hovered div
Show one div and hide rest all
Hide Other Divs with Hide/Show
Show specific div when atag is click. And hide other divs
Show Div on Nav Element Click and Hide Other Divs
Related Tags