Jump to content

Show More ↓ and Show less↑


Serghei
 Share

Recommended Posts

Hi!

it's possible to have a "Show More↓ " Button or clickable text to expand to read all the text and after to click "Show less↑" and close it?  for example the video description text it very long , a lot of tags, a lot of models......  will make the theme to look better. thanks

Screenshot_4.jpg

Link to comment
Share on other sites

Unfortunately there is no easy way to describe this, as this is complex CSS + JS + HTML feature.

Some idea could be wrapping the needed DIVs that you want to expand / collapse inside the following DIV:

<div id="info_expander" style="max-height: 100px; overflow: hidden;">
  ...
</div>

And then adding this button code:

<div style="text-align: center">
    <button data-type="expand" onclick="$('#info_expander').css({maxHeight: $(this).attr('data-type') == 'expand' ? '10000px' : '100px'}); $(this).attr('data-type', $(this).attr('data-type') == 'expand' ? 'collapse' : 'expand');">Show more</button>
</div>

In both places you can change 100px to adjust the desired initial max height of the content.

But of cause it is always better to move styling to CSS files.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...