How to make visible and hide certain divs?
All divs are dynamically generated and have the same class class="bucket"
. This div had another div inside class="restPart"
the rest part that would hide on the first page load.
What I want is I have more than one div,
1. Each divs hides the rest when the page is loaded the first time .
2. Each div is submerged in two parts, one part will always show and the rest part will not be displayed .
3. The break part will only appear when the show more link is clicked ,
4. When the div is fully displayed, it will show the show less link , when we click on it, hide the rest.
5. This should only work for one div we are clicking on , other divs should not know.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
<a href="#" class="more" id="showRest">Show More.</a>
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
<a href="#" class="less" id="showless">Show Less.</a>
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
<a href="#" class="more" id="showRest">Show More.</a>
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
<a href="#" class="less" id="showless">Show Less.</a>
</div>
</div>
</section>
What I want
In the pictures below, more divs will be generated dynamically , previously everything will hide, when I click on the first div will show the rest of the content, but rest will not show, see picture 2 .
Picture 1
Figure 2
source to share
As noted by others, remove duplicate identifiers.
Judging by your image,
your button Show more
, (clicked once - shows the content and) becomes: Show less
so ...
- change button text ( So use one toggle button! )
- toggle / shift previous DIV
$(function() { // DOM is now ready
$("#grid_content").on("click", ".toggle", function(evt) {
evt.preventDefault(); // Prevent window following #hash / jump
var more = $(this).text() === "Show More";
$(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
});
});
.bucket {
width: 290px;
float: left;
margin: 0 0 48px 20px;
border: 1px solid #262626;
background: lightgray;
}
.restPart{
overflow:auto;
display:none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="grid_content">
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
<a href="#" class="toggle">Show More</a>
</div>
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
<a href="#" class="toggle">Show More</a>
</div>
</section>
source to share
First of all - your naming strategy is a little bit wrong. An HTML document can contain (by standard) only one object with one ID - the target ID itself. Thus, you cannot have many objects with id="showRest"
either id="restPart"
or id="showless"
.
Possible solution for your problem.
Create your HTML code something like
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 1...</div>
<a href="javascript:void(0);" class="showmore">Show more</a>
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 1 of everything</div>
<a href="javascript:void(0);" class="showless">Show less</a>
</div>
</div>
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 2...</div>
<a href="javascript:void(0);" class="showmore">Show more</a>
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 2 of everything</div>
<a href="javascript:void(0);" class="showless">Show less</a>
</div>
</div>
Further, in the JavaScript part, you can use a selector, for example:
$(".bucket .showmore").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').hide();
$bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').show();
$bucket.find('.maxinfo').hide();
});
Updated 1: Added, for example, two buckets.
Updated 2: example at JSFiddle
Update 3: Update to JSFiddle with saved content
source to share