View Full Version : Simple <div> Toggle

11-26-2010, 09:14 PM
Sorry - I forgot to mention in the title that this is regarding jQuery.


I just started working with jQuery, and I've come across a problem that I can't seem to solve. I'll try and post all of the relevant sections of the code.

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".read-more").click(function() {
var feed = $(this).attr('id');
var path = 'div.bfc[id="b' + feed + '"]';

<style type="text/css">
div.bfc {

<div style="float:right;margin-top:23px;"><a id="b<? echo $BlogFeedRES['id']; ?>" class="read-more">Read More</a></div>
<br style="clear:both;"><div class="bfc" id="b<? echo $BlogFeedRES['id']; ?>"><? echo $BlogFeedRES['content']; ?></div>

Basically what I'm trying to do is set up blog roll. The content of the blog should be hidden when the page loads, and when the user clicks the "Read More" link, the content, which is contained in the "bfc" div, will be toggled. Since I don't have a set number of blogs at any given time, I set it up so that the div id will contain the value of the div that is to be toggled.

haha, hope you understand what I'm trying to say.

Thanks in advance,


11-27-2010, 09:14 AM
The problem is because you are assigning the same id to both the read-more link and to the div containing the content - which is invalid and is why your div isn't displaying.

You could just remove the id quailifier on your path label and just use div.bfc, if the rest of your html allows it. But it probably doesn't. I'm guessing your html for the blogs consist of a number of pairs of links and content like this:

<div style="float:right;margin-top:23px;"><a class="read-more">Read More</a></div>
<br style="clear:both;">
<div class="bfc">A load of content</div>

so you could use this:

$(".read-more").click(function() {
$(this).parent()//find the parent of the clicked anchor
.nextAll('.bfc')//look for the following siblings of the parent which have class .bfc
.first()//pick the first of these
.toggle();//and toggle it

If you didn't have that <br> between the link and the content than you could use $(this).parent().next().toggle();