Help Needed: How to embed a 'See More' link similar to Facebook?

Graphene Theme Forum » Graphene Wordpress theme » Support

Help Needed: How to embed a 'See More' link similar to Facebook?

(10 posts) (3 voices)

Started 2 months ago by sghegde87
Latest reply from sghegde87
This topic is closed
This topic is resolved

Skip to the latest post | RSS feed for this topic

sghegde87
Member

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  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!!

http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

Any help is much appreciated!!

Thank You.

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #
Kenneth John Odle
Moderator

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.

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.

Posted 2 months ago #
Kenneth John Odle
Moderator

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

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.

Posted 2 months ago #
Prasanna SP
Moderator

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

Personal Website prasannasp.net | WordPress Plugins developed by me.
Graphene Child Theme Template | Graphene Theme Tutorials | WordPress tutorials.

Posted 2 months ago #
sghegde87
Member

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!

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #
sghegde87
Member

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

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #
sghegde87
Member

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!! :-)

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #

sghegde87
Member

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>

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #

sghegde87
Member

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!!

Warm Regards,
Shivanandana.
"Curious to Learn and Generous to Share"

Posted 2 months ago #

sghegde87
Member

[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>[/quote]

Help Needed: How to embed a 'See More' link similar to Facebook?

Topic Closed