Simple jQuery toggle question

JavaScript
1

Hi all

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

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

$(".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

2

Here is you code so that it actually functions:

$(".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);  
    });
    
});

  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.

3

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

1.) Perfect! prev() is what I was looking for. :slight_smile:
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