Menu icon Foundation
Use toggle to expand text

I am trying to put a "read more" link at the end of a paragraph. I don't want the rest of the paragraph to dropdown over the content below, I want it to push the content below down. Basically the same functionality as the top bar nav in mobile but with paragraph text.

For an example, see "details" section at the bottom of this page.

http://www.4culture.org/apply/artprojects/index.htm

Thank you

dropdowntoggle

I am trying to put a "read more" link at the end of a paragraph. I don't want the rest of the paragraph to dropdown over the content below, I want it to push the content below down. Basically the same functionality as the top bar nav in mobile but with paragraph text.

For an example, see "details" section at the bottom of this page.

http://www.4culture.org/apply/artprojects/index.htm

Thank you

Rafi Benkual over 4 years ago

Probably the accordion would be the easiest: http://foundation.zurb.com/docs/components/accordion.html

Or something like this:

http://codepen.io/rafibomb/pen/PwXbBd

Anna Callahan over 4 years ago

This works great when you want the same thing to happen for desktop and mobile. However, I tend to use it when I want to shorten something just for mobile. To do this, I end up repeating the content. Is there a better way to do this?

<div class="medium-6 columns intro">
            <h1>Funding opportunities from 4Culture</h1>
            <ul class="accordion" data-accordion>
                <li class="accordion-navigation">Our funding program applications roll out over the course of the year. While the first few months will find all programs offering Project grants the spring, summer and fall follow with a wealth of opportunities for individuals, groups and organizations. <a href="#panel1a" class="show-for-small-only">continue reading</a> 
                   <div id="panel1a" class="content">We also have open year-around funding to assist with Emergency or unforeseen circumstances and small awards for projects not served by our other programs. Prior to each deadline our staff offer application workshops throughout King County. We encourage you to attend, ask questions to strengthen your application.
                    </div>
                    <p class="hide-for-small-only">We also have open year-around funding to assist with Emergency or unforeseen circumstances and small awards for projects not served by our other programs. Prior to each deadline our staff offer application workshops throughout King County. We encourage you to attend, ask questions to strengthen your application.</p>

                </li>
            </ul>
        </div>