[sghegde87]

sghegde87

#6966

I was just wondering if there is any plugin or jquery technique to do this. How can I add a small ‘See More’ or ‘Read More’ link the middle of a post so that only a portion will be seen after clicking it.

#Note: I am not talking about the built-in <!–more–> tag… I want it inside a post so that if there is a lengthy bulleted list in the post, only interested reader can click on ‘Read more’ and then it expands!!

After searching around, I found this website which explains exactly what I want… But don’t know how to implement it in WordPress/ Graphene!!

Dynamically shortened Text with “Show More” link using jQuery

Any help is much appreciated!!

Thank You.

[Kenneth John Odle]

Kenneth John Odle

#36364

Use a child theme.

Add the CSS on that site to your child theme’s style sheet.

Add the jQuery code via your child theme’s functions file. You’ll need to hook it to the wp_head action hook.

Add the relevant HTML to your post via the HTML editor.

[Kenneth John Odle]

Kenneth John Odle

#36365

That’s a pretty cool effect, actually. I may use it on some non-WP sites. Thanks.

[Anonymous]

Anonymous

#36366

GIYF – http://www.google.com/search?q=show/hide+div+using+jquery

[sghegde87]

sghegde87

#36367

Quote:

Use a child theme.

Add the CSS on that site to your child theme’s style sheet.

Add the jQuery code via your child theme’s functions file. You’ll need to hook it to the wp_head action hook.

Add the relevant HTML to your post via the HTML editor.

@Kenneth John Odle: Thank you … I have just started coding… So… its kind of “out this world” for me. But will surely try it out once I get to know about Child theme!

[sghegde87]

sghegde87

#36368

@Prasanna SP: Superb… I needed the exact terminology to search! You Rock buddy!!

[sghegde87]

sghegde87

#36369

By the way, If anyone visits this post, I would like to let you know what method I use:

I use inline method in WP posts. This can be used in non WP sites as well.

Java Script / JQuery :

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js”></script><script type=”text/javascript”>// <![CDATA[

$(document).ready(function () { $(‘#showhidetarget’).hide(); $(‘a#showhidetrigger’).click(function () { $(‘#showhidetarget’).toggle(400); }); });

// ]]></script>

HTML

<h1>Show/Hide using jQuery</h1>

show/hide

<div id=”showhidetarget”>This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.</div>

Hide

Source: http://simon-holman.net/2010/03/show-and-hide-a-div-using-jquery/

Hope it helped! Cheers!! 🙂

[sghegde87]

sghegde87

#36370

OOPS!! Sorry for HTML blooper..

Here is the Code that works!!

<h1>Show/Hide using jQuery</h1>

<a id="showhidetrigger" href="#howhidetarget">show/hide</a>

<div id="showhidetarget">This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.</div>



<a id="showhidetrigger" href="#howhidetarget">Hide</a>

[sghegde87]

sghegde87

#36371

Quote:

OOPS!! Sorry for HTML blooper..

Here is the Code that works!!

<h1>Show/Hide using jQuery</h1>

show/hide

<div id=”showhidetarget”>This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.</div>

Hide

JavaScript remains the same as above!!!

ENjoy!!

[sghegde87]

sghegde87

#36372

Quote:

OOPS!! Sorry for HTML blooper..

Here is the Code that works!!

<h1>Show/Hide using jQuery</h1>

<a id="showhidetrigger" href="#howhidetarget">show/hide</a>

<div id="showhidetarget">This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.

This is the box that is hidden and shown.</div>



<a id="showhidetrigger" href="#howhidetarget">Hide</a>

Javascript reamins the same!