So I've used bootstrap accordion to hide/unhide info.

I needed the wording to change from 'See more' to 'See less' continuously.

I've implemented this as you can see in the bootply

As you will see, the problem I'm facing is that when first clicked it moves from 'See more' to 'See more' then click again it starts working as I want it to.

I know why its happening but cant figure out how I can remove the a href text and show the hidden info straight away.

$(document).ready(function () {
    $("#morebtn").click(function () {
        $(this).html($(this).html() == "See more" ? "See less" : "See more");
    });
});

So I've used bootstrap accordion to hide/unhide info.

I needed the wording to change from 'See more' to 'See less' continuously.

I've implemented this as you can see in the bootply

As you will see, the problem I'm facing is that when first clicked it moves from 'See more' to 'See more' then click again it starts working as I want it to.

I know why its happening but cant figure out how I can remove the a href text and show the hidden info straight away.

$(document).ready(function () {
    $("#morebtn").click(function () {
        $(this).html($(this).html() == "See more" ? "See less" : "See more");
    });
});

• javascript
• jquery
• html
• css
• twitter-bootstrap

4 Answers 4

It's because first time round your HTML is actually <strong>See more</strong> not "See more" as you think.
Change it to $(this).text() == "See more" and it works :)
You can then just add a class to the element to make it bold. Otherwise you'll need to re-wrap with the <strong> tag each time

remove the tag around your See more text and apply that style via css, it will work.

Try This

 $(this).html(($(this).html() == "See more" )? "See less" : "See more");

tested worked for me

ensure that id is given to dom element which support html() property

i tried with

  <div id="morebtn"  style="background-color:red;width:64px;height:56px;"></div> 

if id given to button then use

    $(this).attr('value',($(this).attr('value') == "See more" )? "See less" : "See more");

try this:

$(this).html($(this).text() == "See more" ? "See less" : "See more");

Or if #morebtn is <a> tag do like this:

$(this).text(function(index,text){
   return text ? "See less" : "See more"
});