Show/hide text paragraph when navigation link is active

[ginanero]

Hello!

I have been scrolling the internet for an answer to this question but I cannot for the life of me figure it out and the code is so complex for my basic understanding of css/javascript/jquery. My website is here: http://www.ginanero.com – I am trying to make a paragraph of text appear above the navigation in the left menu bar that is a description of the photo series which appears when the corresponding project link is clicked. Is this difficult? I went to CodePen to paste my code but my CSS is very long and wasn’t sure if anyone would be willing to scroll through it all. This website is similar to what I am trying to do except I only want the text to appear when it is active and not on image hover – https://heronpreston.com/collections/all

Any advice is so appreciated or even a link in the right direction would be wonderful!

[Beverleyh]

> I am trying to make a paragraph of text appear … when the corresponding project link is **clicked**

> I only want the text to appear when it is **active** and not on image hover

I haven’t looked at your website (on mobile) but how do you anticipate this working? I mean, a click/tap on a link will redirect you to said project page. There will only be a split second in the active state, and therefore not enough time to read a paragraph of text before being whisked away. https://css-tricks.com/almanac/selectors/a/active/

Surely, to have the text appear on hover would make more sense? (Or via some other means as touch-screen users might not even get to see the text – hopefully it isn’t critical)

[ginanero]

Thank you for responding. I think I have made a mistake with my link states – What I mean is that I want hidden text to appear when a project page is clicked so you can flick through the gallery and read the corresponding text explaining the photo series. On pages that are not projects ie ‘about’ page, I’d like there to be no descriptive text. Definitely not on hover – only once the page is up. Does this make sense?

[Beverleyh]

No, not really.

You see, if you click a link in the menu, you will immediately be taken to that page (that’s how hyperlinks work), so I don’t see how your menu links can also trigger the display of a text box, and give the user enough time to read it, before taking them to another location.

To keep things simple, and make life easier for yourself, you might as well put your descriptive text boxes on the actual pages that contain the related content. Your visitors can then read what the page is about when they get there. This would be better for search engines too.

If you want to put information boxes on navigation/menu links, to indicate what the page is about prior to selection, you’d have to use a way that doesn’t interfere with the native click/tap action of the hyperlinks (like a hover tooltip), or rethink your menu system intirely, maybe with a series of icon+text tiles in a grid on the home page.

I don’t really see any other way around it, but maybe another forum member will chip in with other suggestions?

[Beverleyh]

I see your site is built on a “website builder” style platform called Cargo Collective.

I personally have no knowledge of that platform, what’s it can and can’t do, or what it allows its users to do while using its services.

This is probably a question better suited to their own support community http://support.cargocollective.com

[Author]

Posts