[arthurdupuyParticipant]

Hello X,

I would like to add a “read more” button to allow people to decide if they want to read the entire text or not.

So I’ve tried this HTML code in text cornestone :

<div class=’item’>

This is the first part of the text, the part that will be seen originally.<br/>
Read More<br/>

<span class=’more_text’>
This is the extra text, that will be shown after pressing the link above.
</span>

</div>

Then in Custom -> Javascript, I’ve tried that :

$(function(){ /* to make sure the script runs after page load */

$(‘a.read_more’).click(function(event){ /* find all a.read_more elements and bind the following code to them */

event.preventDefault(); /* prevent the a from changing the url */
$(this).parents(‘.item’).find(‘.more_text’).show(); /* show the .more_text span */

});

});

But it doesn’t work.
Have you got a solution ?

Thanks !

Arthur

[RahulModerator]

Hey There,

You can follow this thread for more information regarding the Read More button : https://community.theme.co/forums/topic/customise-read-more-button/t

If you don’t find it helpful, let us know your site’s credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[arthurdupuyParticipant]

This reply has been marked as private.

[DarshanaModerator]

This reply has been marked as private.

[arthurdupuyParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the updates! Please follow these steps:
1] Please edit your page in Cornerstone.
2] Insert a text element into one of your columns.
3] You need to use this html code inside the text element;

<div class='item'>

This is the first part of the text, the part that will be seen originally.<br/>
<a href="#" class="read_more">Read More</a>
<span class="more_text" style="display: none;">This is the extra text, that will be shown after pressing the link above.</span>

</div>

4] And then go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){ 
  $(document).ready(function(){
  	$('a.read_more').click(function(event){ 
		  event.preventDefault();
		  $(this).parents('.item').find('.more_text').toggle('400', 'swing');
	  });
  });
})(jQuery);

http://prntscr.com/c52nr6
http://prntscr.com/c52nxx

We would loved to know if this has work for you. Thank you.

[arthurdupuyParticipant]

Great !!

You’re good X !!!

[ChristopherModerator]

Glad we could help you with this.

[arthurdupuyParticipant]

Hello Rue,

I have tried to adapt your code to an other feature wish is similar as the last one. I explain you :
Hello Jade

1) The page http://www.alveusclub.com/post-bac/ (password : arthure), I would like to have some content appear when I click on special link, for that I’ve created :

– The link button :
<h5 style=”text-align: center; color: black; “>Médecine</h5>

– Then, this HTML code on ‘text’
<div class=’med’ style=’color: #08203b;’ >

Test

<div class=’more_med’ style=’display:none’>

[x_image type=”circle” src=”http://www.alveusclub.com/wp-content/uploads/2016/07/AAEAAQAAAAAAAAU8AAAAJDIxN2Y4OGU0LTU3MTYtNDhkNC1hNDEwLWRjMjhkNzdiMjgzYw.jpg” alt=”” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” style=”width: 30%;margin-left: 10px;margin-top: 10px;”]

</div>

</div>

– Finally, I’ve inserted this JAVAscript to have the .more_med class appear when I click on the link :

(function($){
$(document).ready(function(){
$(‘a.read_more_med’).click(function(event){
event.preventDefault();
$(this).parents(‘.med’).find(‘.more_med’).toggle(‘400’, ‘swing’);
});
});
})(jQuery);

But It doesn’t work :/ …

Thanks again for your help !

Arthur

[Nabeel AModerator]

Hi Arthur,

Please replace your script with this:

(function($){ 
  $(document).ready(function(){
  	$('a.read_more_med').click(function(event){ 
		  event.preventDefault();
		  $('.more_med').toggle('400', 'swing');
	  });
  });
})(jQuery);

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[arthurdupuyParticipant]

you’re genius !!! It’s work perfectly !!

One more thing, do you have the java or jquery which make that :
When you click on the button .read_more_eco it makes disappear the .medecine section and appear .eco
When you click on the button .read_more_med it makes disappear the .eco section and appear .medecine

Thanks again for your help !!

[arthurdupuyParticipant]

It’s ok I’ve found it !!

Thank you very much !!

[Nabeel AModerator]

Glad you’ve sorted it out.

Cheers!

[arthurdupuyParticipant]

New issue Nabeel,

I can’t find the jquery to modify pseudo element
I’ve tried things like that :
$(‘.hexagon_med::before’).css(“border-color”, “#08203B”);
But nothing work !

Thank you !!

Arthur

[arthurdupuyParticipant]

ahaha !! sorry again, I’ve found the solution !!

[Author]

Posts