0

How can I change my code, when I click many times on one specific read more and the slideToggle function change it every time read more/less and show/hide the content, the others stay read more, but even that, when I click on other link with read more, the old one slideUp and the new use slideToggle function to slideDown.

My HTML

<!-- === h1 === -->
    <h1>Lorem ipsum dolor sit amet</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        <p class="more">Duis aute irure dolor in reprehenderit in voluptate.</p>
        <a class="read_more">... Read More</a>
    <!-- === h2 === -->             
    <h2>Consectetur adipisicing elit</h2>
        <p>On the other hand, we denounce with righteous.</p>
        <p class="more">Gemoralized by the charms of pleasure of the moment.</p>
        <a class="read_more">... Read More</a> 
    <!-- === h3 === -->                  
    <h3>Sed do eiusmod tempor incididunt</h3>
        <p>The wise man therefore always holds.</p>
        <p class="more">Et harum quidem rerum facilis est et expedita distinctio.</p>
        <a class="read_more">... Read More</a>

My Jquery

var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less";

rm.click(function () {
  rm.text(moreText);

var $this = $(this);
var more = $this.text($this.text() == moreText ? lessText : moreText).prev(".more").slideToggle("normal");

$('.more').not(more).slideUp();
});
onlinepch
  • 109
  • 3
  • 13
  • I think find it, just in the `Jqery` code replace the `rm.text(moreText);` with `rm.not($this).text(moreText);` Thanks ! – onlinepch Feb 05 '14 at 12:51

1 Answers1

0

Your code is almost correct. Just made this small change to function and added a little CSS.

    var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less";

rm.click(function () {
    var $this = $(this);
    $this.prev().slideToggle();
    $this.text($this.text() == moreText ? lessText : moreText);
});

Add the following CSS.

p.more {
    display: none;
}

Check the following fiddle, http://jsfiddle.net/7ZyuP/2/

Shiva Avula
  • 1,836
  • 1
  • 20
  • 29
  • Thank you @Script Shiva, I already have a CSS rule. I find the problem, if someone have the same issue, see my comment above. – onlinepch Feb 05 '14 at 12:54