0

I am trying to have my button display the word less when it is clicked and more when it has not been clicked.

my jquery is shown below

$("#read_more").click(function() {
    $("#large").toggle();

    }); 

    if ($("#large").is(":visible")) {
        $("#read_more").val("less")
        }

         else { 
            $("#read_more").val("more")
            }
    });

Would I need to add an on toggle event somewhere?

Thanks in advance, D

Improve this question
3
  • 1
    Do you just want it to change to 'less' permanently when clicked? Or toggle on each click? Or toggle on Mouse Down and Mouse Up? Please Clarify this. Commented May 4, 2015 at 15:29
  • 1
    What's wrong with what you have here? Console errors? Input output errors? Please include more debugging details in your question Commented May 4, 2015 at 15:31
  • I have a paragraph that is displayed as none and identified as #large, so when the button with a value of "more" is clicked, it will display, I want it to display the paragraph and the button value to become "less". and t6o return to its original state when clicked again Commented May 4, 2015 at 15:33

3 Answers 3

Reset to default
0

You need to wrap changing "more" and "read" inside the click event and if "#read_more" is a button, you need to use .text not .val

$("#read_more").click(function() {
    $("#large").toggle();
    if ($("#large").is(":visible")) {
        $("#read_more").text("less")
    }
    else { 
        $("#read_more").text("more")
    }
});

Here's the supporting html

<div id="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div  id="large" style="display: none">Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button id="read_more">READ MORE</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much, the problem was accessing the InnerHTML instead of the val property
0

How about using a single button:

<button>More</button>

$('button').click(function () {
    if ($(this).text().toLowerCase() == 'more') {
        $(this).text('Less');
    } else {
        $(this).text('More');
    }
})

DEMO:https://jsfiddle.net/h61019ft/

Improve this answer

Comments

0 

$( "#read_more" ).toggle(function() {
  $(this).text("less");
}, function() {
   $(this).text("more");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="read_more"> more </div>

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

https://api.jquery.com/toggle-event/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.