SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple jQuery toggle question.

    Hi all

    I have a simple toggle working fairly good.
    My main problem lies with the read more and read less.

    Code HTML4Strict:
    <div class="toggle-title">Read More</div>
    <div class="toggle-details" style="display:none;">some text is now showing</div>

    Code JavaScript:
    $(".toggle-title").click(function () {
        $(this).next(".toggle-details").slideToggle("fast");
        $(this).text($(this).text() == 'Read More' ? 'Read Less' : 'Read More');
        return false;
    });

    Three questions:

    1. How do I position 'read more' below the content so it moves down the page and not stay at the top?
    2. How do I replace the read more / read less text with a image?
    3. How do I insert the css with javascript so my css won't hide the content if javascript is disabled?


    Many thanks,
    Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,524
    Mentioned
    52 Post(s)
    Tagged
    1 Thread(s)
    Here is you code so that it actually functions:

    Code JavaScript:
    $(".toggle-title").click(function () {
        var thistitle=$(this);
        $(this).next(".toggle-details").slideToggle("fast", function(){
            var titletext=($(this).is(":visible")) ? "Read Less" : "Read More";  
            $(thistitle).html(titletext);  
        });
     
    });

    http://jsfiddle.net/WHb5k/

    1) Do you mean move the title below the content only after a toggle, or always? If always, just move the title div below the content, and in the Javascript, use prev() instead of next().

    2) inside the div, put an image tag. Then in your javascript, select the image, and change the src attribute.

    3) Don't apply display:none within the CSS. Use javascript instead.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is you code so that it actually functions:
    So it actually functions? Not sure I understand, my code works how I need it to

    1.) Perfect! prev() is what I was looking for.
    2.) Thanks
    3.) Just what I thought but not sure how to add it with javascript, I'll see if I can find examples online cheers.

    So, got me wondering now Force Flow. If it works how I need it to by using .prev() why did you change the code?
    Whats the benefits?

    many thanks,
    Barry
    The more you learn.... the more you learn there is more to learn.


Bookmarks

Posting Permissions

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