Markup hidden content to be displayed later via Javascript

Question

I have some paragraphs like this:

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a> firm communications and setting up interviews.</p>

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>

Where I have READ MORE I want all of the subsequent text to be hidden, then it will display later when I activate the link with Javascript. I was going to put a SPAN with class="hiddencontent" or something around the rest of the text in that paragraph, but now I realize since I have the rest of that first paragraph, plus the entire second paragraph, what is the recommended way to mark this up? A single SPAN element can't be part of two different paragraphs, obviously.

Note that there will be multiple such READ MORE paragraphs on this page, so I can't just do an across-the-board $('.hiddencontent').show(); on everything in the page.

Thanks!

Put hiddencontent spans around the rest of the first paragraph and all of the second paragraph. — Barmar
– Barmar, Commented Sep 3, 2014 at 19:08

j08691 · Accepted Answer · 2014-09-03 19:08:20Z

2

I'd just wrap the related paragraphs in an element like a div, create a hidden class (e.g. .hidden) and apply that class to anything you want to hide. It would be easiest to wrap the text following the link in a span, and apply the hidden class to that span and the paragraph(s) after it like:

<div>
    <p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a><span class="hidden"> firm communications and setting up interviews.</span></p>
    <p class="hidden">Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>
</div>

The you could use this jQuery to show the "extra"

$('a').click(function () {
    $(this).closest('div').find('.hidden').toggle()
})

jsFiddle example

answered Sep 3, 2014 at 19:08

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ne1410s Over a year ago

Be careful about inadvertently appling this to all hyperlinks! :S

j08691 Over a year ago

@ne1410s - Yes, obviously. A class like <a class="more"> would make things easier.

ne1410s Over a year ago

Only obvious if you know!

BB Design Over a year ago

Perfect. Thanks for the help, and the Javascript was a bonus!

ne1410s · Accepted Answer · 2014-09-03 19:11:55Z

0

Try something like this:

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a class="content-hider">READ MORE</a><span class="extra-content" style="display:none;"> firm communications and setting up interviews.</span></p>

And

$('a.content-hider').click(function () {
    $(this).siblings('span.extra-content').show();
    $(this).hide();
});

Has the effect of removing the hyperlink until the page is reloaded, if that is the effect you're aiming for?

answered Sep 3, 2014 at 19:11

ne1410s

7,1126 gold badges60 silver badges63 bronze badges

1 Comment

BB Design Over a year ago

Yes, I am also hiding the READ MORE link as well.

Dev Man · Accepted Answer · 2014-09-03 19:20:51Z

try my function and modify it according to your needs (Note: you need jquery).

    <?php
    $text="your_text";// your text
    $post_id="1";// a unique number to make sure that when a read more link is clicked all the .second parts are not shown,only the one which has the same number will be shown.
    function read_more($text,$post_id)
    {
        if(strlen($text) > 150)//if the text is greater than 150 characters 
        {
           //cut the string in 2 parts
           $first_part = substr($initial_cap_sin, 0, 150);//first part
           $second_part = substr($initial_cap_sin,150);//second part
           $final_text = ' <!---first part-------->
                           <span class="first_part">'.$first_part.'</span>
                           <!----second part------>
                           <span class="second_part" id="second_part'.$post_id.'">'.$second_part.'</span> 
                           <!----read more link--->
                           <span class="read_more_link" rel="'.$post_id.'">... Read More</span>';
        }
        else
        {
        $final_text=$text;// else if the text is not greater than 150 characters dont do any thing
        }
    }
    echo read_more($text);//send the text to the readmore function for processinf
    ?>
    <script>
    $(document).on('click',".read_more_link",function(){
        var read_m_id = $(this).attr("rel");
        $("#second_part"+read_m_id).fadeIn();
        $(this).hide('fast')
    });
    </script>

Collectives™ on Stack Overflow

Markup hidden content to be displayed later via Javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related