Participating Frequently

Answered

Text Slide in onclick

Forum|Forum|9 years ago
June 6, 2017
3 replies
941 views

Hi,

Could anyone explain how this is accomplished. When you click on the navigation bar on the left, the text for that particular link slides in. Is this done in a frame? I've seen the sliding anchored text. This only uses a single section at a time.

Thank you

Randy

This topic has been closed for replies.

Correct answer pziecina

Thanks Nancy,

The problem with the OP's question, is that it covers a number of css features, so yours for triggering the event, and mine for the slide animation. Although I have said this many times before, such effects do require a more advanced knowledge to implement, unless one simply uses a plug-in, than the avarage Dw user has.

Personally I think that the creation of such effects should be made easier, and given that more people are now at least asking about them, it is a market that Dw and many other coding tools should look at, but currently are ignoring, simply because the people they are relying on to tell them, either do not know 'how' to code them themselves, are being ignored, or those in charge think such features have no 'wow' factor.

pziecina

Legend

You could also do this using just css, an example is at -

https://codepen.io/johnlouie04/pen/BqyGb

It is called 'content switcher'.

Nancy OShea

Community Expert

Your link is for a pure CSS content slider. Maybe this is more what you had in mind?

https://codepen.io/michaellee/pen/KsbIt

Nancy

Nancy O'Shea— Product User & Community Expert

pziecinaCorrect answer

Legend

Thanks Nancy,

The problem with the OP's question, is that it covers a number of css features, so yours for triggering the event, and mine for the slide animation. Although I have said this many times before, such effects do require a more advanced knowledge to implement, unless one simply uses a plug-in, than the avarage Dw user has.

Personally I think that the creation of such effects should be made easier, and given that more people are now at least asking about them, it is a market that Dw and many other coding tools should look at, but currently are ignoring, simply because the people they are relying on to tell them, either do not know 'how' to code them themselves, are being ignored, or those in charge think such features have no 'wow' factor.

Nancy OShea

Community Expert

No frames involved. If you view source or disable CSS in your browser, you'll see it's just one very long page of content. CSS and jQuery are used to show/hide content when the menu is clicked. Your example uses a slide transition instead of a customary fade.

You could do something similar with Bootstrap Tabbed Panels.

https://bootsnipp.com/snippets/nP8E7

Nancy

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

Looks like they used Visual Composer for WordPress to create an accordion/tabbed page.

Essentially all of the content is on that page if you take a look at the source code, it's all there (well, being WordPres, it's all added by the server when the page is created from the database) but is hidden until the right button is clicked, then it opens/slides into place.

Lots of javascript involved.

bigdog5000Author

Participating Frequently

Hi Jon,

Thanks for the input, much appreciated. I wasn't sure but I thought it might have been generated by something.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded