Home>Support>Vantage – how to add function to reveal hidden text in a list when someone hovers

Vantage – how to add function to reveal hidden text in a list when someone hovers

By rossgardens, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi

I want to add a function to my website so that I can list services on a page and then when someone hovers over each service that service expands to reveal some text about that service. Is this possible?

Thanks
Ross

URL: http://rossgardens.co.uk/wp

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Daniel
    Hi, I Work Here

    Hi Ross,

    This may be possible with some custom CSS. I can try and assist you better if you direct me to the exact page you want this function on.

    Cheers!

  2. 9 years, 7 months ago rossgardens

    Hi Addo
    Thanks for getting back to me. It’s the list of Services on this page: http://rossgardens.co.uk/wp/?page_id=42
    I’d also like to do the same thing for the list of Stages on this page: http://rossgardens.co.uk/wp/?page_id=37
    Thanks
    Ross

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Ross

    What about a plugin solution for this? Here are a few options:

    https://wordpress.org/plugins/jquery-collapse-o-matic/
    https://wordpress.org/plugins/wp-showhide/
    https://wordpress.org/plugins/better-wordpress-showhide-elements/

  4. 9 years, 7 months ago rossgardens

    Hi Andrew
    Great! Many thanks. I installed Collapse-O-Matic.
    It seems to work great and is what I was after. The only problem that the first title of each list has a large space underneath that I can’t seem to get rid of (http://rossgardens.co.uk/wp/?page_id=42). Any suggestions much appreciated…
    Thanks
    Ross

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Glad that helped. Try something like this under Appearance > Custom CSS:

    /* Widget Heading Tags */

.textwidget h1 {
margin-bottom: 0;
}
  6. 9 years, 7 months ago rossgardens

    Thanks for the suggestion Andrew, Unfortunately that didn’t make any difference…
    Ross

  7. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    That is working, there was a bottom margin there, it’s gone now. Perhaps not that obvious. If you’d like try adding a negative margin instead:

    /* Widget Heading Tags */

.textwidget h1 {
margin-bottom: -1em;
}
  8. 9 years, 7 months ago rossgardens

    Hi Andrew

    Thanks for your suggestion. The coding you gave seemed to reduce the spacing underneath the heading at the top of the page. It’s the space under the first item in the list that I want to reduce… Hope that makes sense?
    http://rossgardens.co.uk/wp/?page_id=42

    Cheers
    Ross

  9. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Perhaps take a look at the setup of that widget/plugin. If you view the link sent you can see an exposed opening and closing div tag. Those shouldn’t be there.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More