how to allow only one div to expand on readmore click
Question
I have a page with blog sort of structure where i would be placing multiple posts . The problem i am facing is trying to get only one read more link to be expanded and collapsing others. i have tried different jquery methods and multiple html structures to achieve this but failing to get the desired results. kindly let me know how i can resolve this issue . Thank you. url: http://jsfiddle.net/DSbFc/
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.ReadMore').bind('click', function(e)
{
e.preventDefault();
$('.hide').slideToggle(function()
{
$(this).closest('.readmore').find(".hide").toggle();
});
});
});
</script>
<body>
<div id="art-main">
<article class="post">
<table>
<tr>
<td><a href="images/image.png" data-lightbox="width:260;height:280" title="image"><img src="images/image.png" width="260px" height="280px"/></a></td><td>
<br/>
<table>
<tr>
<td>No.</td><td>Description</td><td>Qty.</td>
</tr>
<tr>
<td>1</td><td> content</td><td> 1</td>
</tr>
<tr>
<td>2</td><td> content</td><td> 1</td>
</tr>
<tr>
<td>3</td><td> content</td><td> 1</td>
</tr>
<tr>
<td>4</td><td> content</td><td> 2</td>
</tr>
<tr>
</table>
<div class="ReadMore">
<a href="#" >Read More</a>
</div>
<div class="hide">
<table >
<tr >
<td>6</td><td> content</td><td> 1</td>
</tr>
<tr >
<td>7</td><td> content</td><td> 1</td>
</tr>
<tr >
<td>8</td><td> content</td><td> 1</td>
</tr>
<tr >
<td>9</td><td> content </td>
</tr>
</table>
</div>
<div class="hide">
text
</div></td>
</tr>
</div>
</table>
<br/>
<br/>
<table>
<tr>
<td><a href="images/image2.gif" data-lightbox="width:400;height:400" title="image2"><img src="images/image2.gif" width="260px" height="280px"/></a></td><td><b style="font-size:22px; color:#fff;">title</b>
<br/>
<b style="font-size:22px; color:#fff;">title</b>
<br/>
content
<br/>
<div class="ReadMore">
<a href="#" >Read More</a>
</div>
<div class="hide">
content
<br/>
<br/>
• content
<br/>
• content
<br/>
• content
<br/>
<br/>
</article>
</div> </div>
</div>
</div>
</div>
</body>
3 answers
solution1
2 2013-08-11 21:52:15
I fixed your codes. here is LIVE DEMO .... However, I recommend you should use container divs with position: absolute; values since the table show/hide trigger will ruin the scrollbar of your page.
$(document).ready(function(){
$(".ReadMore1").click(function(){
$(".hide1").slideToggle();
});
});
$(document).ready(function(){
$(".ReadMore2").click(function(){
$(".hide2").slideToggle();
});
});
solution2
2 ACCPTED 2013-08-11 22:39:50
Also this works:
$(document).ready(function () {
var rm = $(".ReadMore");
var hi = $('.hide');
rm.click(function (e) {
e.preventDefault();
var now = $(this).siblings(".hide");
now.slideToggle();
hi.not(now).filter(':visible').slideToggle();
});
});
solution3
1 2013-08-11 21:37:18
If I understood your problem correctly, I think you might be able to solve it using numerical element IDs, as in the example below:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var totalNumberOfBoxes = 2;
function expand (id) {
for ( var i = 0; i < totalNumberOfBoxes; i++ ) {
if ( i == id ) {
$('#hide' + i).show();
} else {
$('#hide' + i).hide();
}
}
}
</script>
</head>
<body>
<div style="padding:30px;">
<div>Always-visible content 0</div>
<a href="#" onclick="expand(0);">Read More</a>
<div id=hide0 style="display:none;">Hidden content 0</div>
</div>
<div style="padding:30px;">
<div>Always-visible content 1</div>
<a href="#" onclick="expand(1);">Read More</a>
<div id=hide1 style="display:none;">Hidden content 1</div>
</div>
</body>
</html>
Hope this helps!
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.