CODEWITHSUNDEEP
javascriptjquery
Ben Daggers
Ben Daggers

Reputation: 992

Change Text when Links are Clicked

So I'm working on a collapsing div container using bootstrap. Its working perfectly until I tried to add a modification.

I added a text link that says "View More" so my users will know that there is more to text read. Anyway, I have written a jquery code to change the text "View More" to "Close" WHENEVER the DIV container is collapsed or shown.

My Goal:

When user decided to collapse the div container, I want it to change the "view more" text to "close"

Here's my Problem:

My JQUERY code only that modifies the text "VIEW MORE" to "CLOSE" only works at the first text links. The succeeding text links are not modified even if i clicked it.

Also, there are five "view more" text links in the page with same classnames (not sure if this info is relevant but its worth mentioning, i guess...)

Anyway, You can see what's wrong in the references i have provided below (gif and codepen)

Here's a GIF for your reference. imgur.com/V8Q4RSj

Here's my complete code: https://codepen.io/bendaggers/pen/dyoqqVE

Here's my JQUERY Code:

$("#yt").click(function(){

  $('#closeopen').text($('#closeopen').text() == 'View More' ? 'Close' : 'View More');

});

I would appreciate anyone who could help me.

Upvotes: 0

Views: 112

Answers (2)

KodeFor.Me
KodeFor.Me

Reputation: 13511

A possible approach:

jQuery(document).ready(
  function () {
    jQuery('.toggleMe')
      .on(
        'click',
        function() {
          var state = jQuery(this).data('state');

          jQuery(this).data('state', 'closed' === state ? 'revealed' : 'closed');
          jQuery(this).text('closed' === state ? 'Close' : 'Read More');
        }
      );
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span
  class="toggleMe"
  data-state="closed"
>
  Read More
</span>
<br>
<br>
<span
  class="toggleMe"
  data-state="closed"
>
  Read More
</span>

Upvotes: 1

User863
User863

Reputation: 20039

Using CSS Pseudo-element ::before 

.collapse:not(.show) + .closeopen::before {
  content: 'View More';
}
.collapse.show + .closeopen::before {
  content: 'Close';
}

Working Demo

https://codepen.io/aswinkumar863/pen/gOpddZw

Upvotes: 2

Related Questions