Simple <div> Toggle

Simple <div> Toggle

Hey,

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.


  1. <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.     $(".read-more").click(function() {
  5.             var feed = $(this).attr('id');
  6.             var path = 'div.bfc[id="b' + feed + '"]';
  7.             $(path).toggle();
  8.     });
  9. });
  10. </script>
  11.  
  12. <style type="text/css">
  13.      div.bfc {
            display:none;
            clear="both";
        }


  14. </style>

  16. <div style="float:right;margin-top:23px;"><a id="b<? echo $BlogFeedRES['id']; ?>" class="read-more">Read More</a></div>
  17. <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,

Ryan