CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
Adam Bell
Adam Bell

Reputation: 1045

jQuery: Cant' get toggle to work on showing / hiding div content

Trying to get a div to appear (or hide) using jQuery's toggle feature. Script doesn't seem to work even though I'm not seeing any errors.

Here's an example page: https://perfec-tone.com/product/day-night/

Here's the script:

jQuery(function($) {
    $(document).ready(function() {
        $("#readMore, #readLess").click(function(){
            $(".collapsed-content").toggle('slow', 'swing');
            $(".full-content").toggle('slow', 'swing');
            $("#readMore").toggle();// "read more link id"
            return false;
         });
    });
});

and the example HTML:

<div class="collapsed-content">
    <p>Excerpt Text Goes Here</p>
<div><p style="text-align: center;"><a id="#readMore" class="btn-cta" href="#">Read More</a></p></div>
<div class="full-content">
    <p>Full Text Goes Here</p>
</div>

Upvotes: 0

Views: 32

Answers (1)

ers36
ers36

Reputation: 231

The anchor tag has a wrong id ("#readMore" instead of "readMore"). Change your code to the one below and it should work:

<div class="collapsed-content">
<p>Excerpt Text Goes Here</p>
<div><p style="text-align: center;"><a id="readMore" class="btn-cta" 
href="#">Read More</a></p></div>
<div class="full-content">
<p>Full Text Goes Here</p>
</div>

The script should be the same:

jQuery(function($) {
$(document).ready(function() {
    $("#readMore, #readLess").click(function(){
        $(".collapsed-content").toggle('slow', 'swing');
        $(".full-content").toggle('slow', 'swing');
        $("#readMore").toggle();// "read more link id"
        return false;
     });
   });
});

Upvotes: 1

Related Questions