Is it possible to create expandable text with show/hide toggle without a plugin?

  • Posts

  • #2188456

    I've had programmers create sites for me previously with expandable text areas – outside of WordPress. I'd like to use it on our What we do page – rather than clicking to a new page each time, when expanding upon the services. I've tried looking it up and can see its possible on wp.org with a plugin but know that adding these aren't possible on wp.com.

    Anyone help? I'm using the Swell template – not that makes any difference!

    The blog I need help with is: palmerowen.wordpress.com

    @laurapalmerwp

    You can accomplish this with the details tag:

    http://www.w3.org/wiki/HTML/Elements/details

    http://www.w3schools.com/tags/tag_details.asp

    http://en.support.wordpress.com/editors/#text-editor

    For example:

                        <details>   <summary>Text you see before expansion.</summary>   <p>Text you see after expansion.</p> </details>

    Keep in mind, this is a relatively new HTML5 element, and may not work as expected in certain browsers, e.g., Internet Explorer, Firefox.

    Let us know if you have any more questions :-)

    Thanks for this. Is there fallback code I could add for browsers that don't recognise html5? Even if it means opening up new pages with the full description on.. I can only see it working on 2 of my browsers currently!

    @laurapalmerwp

    If the browser doesn't support the tag, it will most likely just display all the text at once, like this:

    https://cloudup.com/c4clKh0PmAW

    If there is anything else you need, please let us know.

    Hi again. I have been playing with this to see how it would look on browsers that recognise and those that don't. My only browser that it works in has placed the arrow on the line above the summary text – rather than just before the summary text on the same line!

    The code looks like:

    <details>
    <summary><h2>All websites now need to be mobile</h2>

    </summary>
    <p>The stats say that people look online on their phones or tablets as much as their desktops. The evidence is there for yourself – everyone about is unable to look up from their phones! Businesses would be foolish to not create a website that works on all formats.</p>
    </details>

    Anyone tell me what I'm doing wrong? I'm sure somethings not in the right place – but when I tinker with it, it stops being expandable.

    @laurapalmerwp

    Try this:

                        <details>   <summary>All websites now need to be mobile</summary>   <p>The stats say that people look online on their phones or tablets as much as   their desktops. The evidence is there for yourself - everyone about is unable to look up from their phones! Businesses would be foolish to not create a website that works on all formats.</p> </details>

    If you want the summary text to look a certain way, apply your CSS rules on the summary element.

    If you have further customization questions, please try posting to our CSS Customization forum:

    https://en.forums.wordpress.com/forum/css-customization

    Let us know if you have any more questions.

    Ok, that doesn't help me. What I was looking for was actual help with the css as I do not know how to apply the css with the expandable text code in situ also. I want the summary text to be styled as h2.

    Thanks

    @laurapalmerwp

    Try posting your customization request to the CSS Customization forum, as I previously recommended:

    https://en.forums.wordpress.com/forum/css-customization

    When you create a CSS-related help request, please make sure to select or link to the WordPress.com site you're working on and include a clear description of the change you're trying to make.

    To learn more about how CSS editing works at WordPress.com, see these helpful pages:

    http://en.support.wordpress.com/custom-design/css-basics/

    http://en.support.wordpress.com/custom-design/editing-css/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Let us know if you have any more questions.

    Can't see where to post the question?

    @laurapalmerwp

    Just click the Add New button to start a new thread:

    http://note.io/1AicF44

    Also, you might want to check these out before you create your post:

    https://en.forums.wordpress.com/topic/read-me-first-what-is-custom-css?replies=1

    https://en.forums.wordpress.com/topic/learning-about-css-1?replies=1

    If there is anything else you need to get started, let us know.

  • Author

    Posts

The topic 'Is it possible to create expandable text with show/hide toggle without a plugin?' is closed to new replies.