www.webdeveloper.com
Results 1 to 9 of 9

Thread: Collapsing DIV's to hide and expose text.

  1. #1
    Join Date
    Apr 2013
    Posts
    4

    Collapsing DIV's to hide and expose text.

    Hey guys,

    Hope someone here can help me out. I've just started coding and javascript is the first language I've decided to tackle.

    I figured I'd design a quick page to have fun stuff to try and challenge myself with, and I'm stuck. So here is what I've done...

    I have a div with some text in it and a 'read more' button at the bottom. Like this:

    Code:
    <div>
    		<article class="article">
    			<h1>
    			Test
    			</h1>
    			<p>
    			Text text text text text text text text text text.
                Text text text text text text text text text text.			
    			Text text text text text text text text text text.
    			</p>
    			<p class="less">
    			Extra text here. Extra text here. Extra text here.
    			Extra text here. Extra text here. Extra text here.
    			</p>
    			<button type="button" onclick="open_close()" class="open_one">read more</button>
    		</article>
    </div>
    When I click on the button it fires this function:

    Code:
    function open_close(){
      var txt = $("button.open_one").text();
      if(txt === "read more"){                  
    $("p.less").removeClass("less").addClass("more");
    $("button.open_one").text("close");                            
      }
      else
      {
    $("p.more").removeClass("more").addClass("less");
    $("button.open_one").text("read more");
      }  
      }
    Everything works great!!! Maybe not the best code or the most efficient way, but it works! Now...here's my problem. If I add a second block of text...another div block under the first...like this:

    Code:
    <div>
    		<article class="article">
    			<h1>
    			Test
    			</h1>
    			<p>
    			Text text text text text text text text text text.
                Text text text text text text text text text text.			
    			Text text text text text text text text text text.
    			</p>
    			<p class="less">
    			Extra text here. Extra text here. Extra text here.
    			Extra text here. Extra text here. Extra text here.
    			</p>
    			<button type="button" onclick="open_close()" class="open_one">read more</button>
    		</article>
    </div>
    <div>
    		<article class="article">
    			<h1>
    			Test
    			</h1>
    			<p>
    			Text text text text text text text text text text.
                Text text text text text text text text text text.			
    			Text text text text text text text text text text.
    			</p>
    			<p class="less">
    			Extra text here. Extra text here. Extra text here.
    			Extra text here. Extra text here. Extra text here.
    			</p>
    			<button type="button" onclick="open_close()" class="open_one">read more</button>
    		</article>
    </div>
    When I do THIS..it breaks. No errors that I can see, but nothing happens. I'm starting to think it has to do with the jQuery selector...but I'm not sure.

  2. #2
    Join Date
    Apr 2013
    Location
    Italy
    Posts
    1
    Hi l0ad3dr3v0lv3r,

    why not to add parameter to pass "this" to the function open_close():


    function open_close( element ){ var txt = $( element ).text(); if(txt === "read more"){ $("p.less").removeClass("less").addClass("more");$("button.open_one").text("close"); } else {$("p.more").removeClass("more").addClass("less");$("button.open_one").text("read more"); } }
    and in the html:


    <button type="button" onclick="open_close(this )" class="open_one">read more</button>

  3. #3
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    The problem is here: var txt = $("button.open_one").text(); Now you've got 2 buttons and button.open_one.text() will be "read more read more" or something like that, thus the second condition is executed
    easy to fix, pseudocode:
    Code:
    $(document).ready(function(){
        $('button.open_one').click(function(){
            $(this).parent().find('p.less').toggleClass('less').toggleClass('more');
            $(this).text(($(this).text().trim() == 'close') ? ('read more') : ('close'));
        }); 
    });
    and delete onclick="..." from button. Didn't check, but should work if i didn't make any typos

  4. #4
    Join Date
    Apr 2013
    Posts
    4
    Thanks for the quick reply, both of you, it's appreciated.

    So. I tried the code provided by sQu1rr and now both blocks open and change text but don't close...that's alright, I think I can fix that.

    Thanks again...I'm trying to understand what you wrote and get most of it, but not this line:

    $(this).text(($(this).text().trim() == 'close') ? ('read more') : ('close'));

    Can you explain what's going on here? It would really help me out. Thanks again.

  5. #5
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    " if(expr) { do1 } else { do2 } " = " expr ? do1 : do2 "
    $(this).text(($(this).text().trim() == 'close') ? ('read more') : ('close'));
    is the same as
    if($(this).text().trim() == 'close') $(this).text('read more');
    else $(this).text('close');
    I didn't say it will work, it's just a piece of code i wrote without testing I hoped it would give you a clue.

  6. #6
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    To make it close, you should probably change ".find('p.less')" to ".find('p.less, p.more')" There are also more convenient ways to do so

  7. #7
    Join Date
    Apr 2013
    Posts
    4
    Thanks for the explanation. Can you explain to me why you use the .trim method? I searched online and it seems to remove white space but I just can't see why you needed to use it. Thanks, still learning.

  8. #8
    Join Date
    Apr 2013
    Location
    Bournemouth, UK
    Posts
    15
    No reason lol. You don't really need to use .trim here. sorry i misled you Sometimes i write those things automatically, just to make sure that string has no whitespaces, but .text() should remove them anyway except for &nbsp; of course

  9. #9
    Join Date
    Apr 2013
    Posts
    4
    Perfect! Thanks again for the quick response(s).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles