Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple <div> Toggle

    Sorry - I forgot to mention in the title that this is regarding jQuery.

    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.

    Code:
    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         $(".read-more").click(function() {
                 var feed = $(this).attr('id');
                 var path = 'div.bfc[id="b' + feed + '"]';
                 $(path).toggle();
        });
    });
    </script>
      
    <style type="text/css">
         div.bfc {
                  display:none;
                  clear="both";
              }
    </style>
    
    
    <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,

    Ryan

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    <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:

    Code:
    $(document).ready(function(){
         $(".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();


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •