This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Open 9 replies premiumthemetheme-vantage
rossgardens
11 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Daniel Staff 11 years, 4 days ago

    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. rossgardens 11 years, 3 days ago

    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. Andrew Misplon Staff 11 years, 2 days ago

    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. rossgardens 11 years, 2 days ago

    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. Andrew Misplon Staff 11 years, 2 days ago

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

    /* Widget Heading Tags */
.textwidget h1 {
margin-bottom: 0;
}
  6. rossgardens 11 years, 2 days ago

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

  7. Andrew Misplon Staff 11 years, 2 days ago

    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. rossgardens 10 years, 11 months ago

    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. Andrew Misplon Staff 10 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread