Post by nordicmood » Mon May 21, 2018 9:03 pm

Hi,

Im trying to create a "read more" button to my website. The code Im using on my Opencart 2 version works fine, the only thing is that every time I press the read more button and then refresh the page, the read more button has disappeared. If I then go into the CMS editor and just save the CMS block, then the read more button is activated again. With other words, the read more button works one time, then I have to go into CMS editor and just press save to reactivate it… Can anyone tell me how I can sort this issue out? Ps. I dont know much about coding (with text displayed below)...

I'm using the following code:
<div class="comment more">
</div>
Last edited by nordicmood on Thu Jun 21, 2018 10:15 pm, edited 1 time in total.

Newbie

Posts

Joined
Fri Jul 07, 2017 4:51 pm

Post by yodapt » Mon May 21, 2018 10:04 pm

Journal?

Opencart Developer - My Extension Showcase
Contact me at aeon.yoda@gmail.com


User avatar
Active Member

Posts

Joined
Fri Jun 17, 2011 6:39 pm


Post by theGeekyStuff » Thu May 24, 2018 6:14 pm

You will want to add a tag to the hidden paragraph within the read more button. In your HTML content, you can do the following i.e,

Code: Select all

<span id="moretext">Ceteros comprehensam est ut, mel deserunt temporibus interpretaris ad. Primis liberavisse et nam, justo graece causae id ius. Ne tollit audiam vel, sumo euismod suavitate et per. No noster similique mei. Falli persecuti ei nam. </span>
Then, add display property for the tag in your css file i.e,

Code: Select all

#moretext{
display:none;
}
Lastly, add your javascript "read more" button. You can add this inline to your HTML content as source code provided your editor has codemirror plugin or similar.

Code: Select all

<script type="application/javascript">
$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
      $("#toggle").text("Read Less");
      $("#moretext").slideDown();
    } else {
      $("#toggle").text("Read More");
      $("#moretext").slideUp();
    }
  });
});
</script>

Newbie

Posts

Joined
Wed May 23, 2018 7:08 pm

Post by nordicmood » Thu May 24, 2018 7:28 pm

Thanks for that! I'll check it out...

It's Journal, yes.

Newbie

Posts

Joined
Fri Jul 07, 2017 4:51 pm

Post by theGeekyStuff » Thu May 24, 2018 8:09 pm

If Journal, you can simply add the CSS code in Settings > Custom Code > CCS

Newbie

Posts

Joined
Wed May 23, 2018 7:08 pm
Who is online

Users browsing this forum: No registered users and 68 guests