What’s the best way to change content on a page dynamically with button click?

  • Hello!

    I am creating a WP theme and my homepage consists out of 3 sections / divs. One of these div should have its own navigation bar that changes the content dynamically if the user clicks on the respective button (the other two divs content stays as is though, so the following should only apply to one section of the landing page.)

    So a button click should not open a new page but should just swap out the content for this section. For example, I could create another 3 divs, all of them styled the same but with different content but only one of these divs will be shown to the user. Once he/she clicks on a button in the belonging navigation, the shown div will disappear and another div will appear (without changing pages).

    I guess this could almost be a slider but instead of having the little arrows right and left to get to the next slide, once can control this with a navigation bar (and therefor also skip slides (get from slide 1 to slide 4 without having to go through slides 2 and 3).

    Is there any plugin I can use for this? And if not, can anyone help me on how to get started how I would write this code?

    Many thanks in advance!!

    • This topic was modified 5 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    It sounds like you are describing a tabbed section, except the “tabs” are style as buttons. Sliders aren’t too different, except the nav arrows are coded as the interactive elements instead of tabs. The real difference is sequential instead of selective navigation. Sliders tend to be image oriented.

    You can try some of the tabbing plugins and restyle the tabs as buttons.
    https://www.ads-software.com/plugins/search/tab/

    Another similar mechanism is accordion. It’s more conducive to small sections and small screens.
    https://www.ads-software.com/plugins/search/accordion/

    If you want to code your own, add JavaScript listeners to each button. The listener callback alters CSS visibility as needed to display the respective section of content. Using jQuery selectors can be a lot easier than fussing with listeners.

    Thread Starter jana90

    (@jana90)

    Thanks so much, @bcworkz! Yes, you are right that this is pretty much the same as a tabbed section. So I will see if I can use one of these plugins ??

    Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘What’s the best way to change content on a page dynamically with button click?’ is closed to new replies.