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

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

    Any help is much appreciated!!

    Thank You.

    Mod

    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.

    Mod

    Kenneth John Odle

    #36365

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

    Anonymous

    #36366

    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

    #36368

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

    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

    #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

    #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

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

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!