1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Show/Hide Sections on button click

Discussion in 'Free Divi Community Forum' started by GideonS, Feb 18, 2023.

  1. GideonS

    GideonS New Member

    Hello,

    I would like to figure out how to show/hide certain divi sections on click of a button (or in my case an image). I don't want it to change the url though, or scroll around. I was able to achieve the affect using a Divi Booster plugin (show/hide button module), but it adds an anchor link in the url bar when I click and it scrolls to the top of the section.

    Because this may sound confusing, I've attached a screenshot of my site. You'll notice three speaker pictures with one bio beneath. On click of a speaker, the bio should switch out and the appearance of the speaker changes to clarify what you've selected. I've made three different sections, each one has a different speaker highlighted and the appropriate bio below. I just want to switch these sections out on click of the different bio pictures (without scrolling to the top of the section or adding anchor links to the url bar—both are currently happening). The site is ruthretreat.com

    Thank you for your help!
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see that you're not using the Divi Booster module to toggle the content. And I see that the Divi Booster module is added at the top row, which is set to be hidden. If you were to use it, there shouldn't be any anchor link & scrolling issue.

    Though, the Divi Booster module only allow text in it. To retain your current design, I could think of two workaround:
    1. Use custom jQuery code to trigger the click of the Divi Booster module, whenever your image is clicked.
    2. Or add the Divi Booster module as part of the image column & make it position absolute to cover the whole column & set it to be opacity 0.
     
    GideonS likes this.
  3. GideonS

    GideonS New Member

    Thanks for your reply. The first solution you mentioned is actually what I am currently doing—I just have the buttons hidden so you don't see them, but I had it to when you click the image, it clicks the Divi Booster show/hide module. However, it would scroll to where the module was (even though it was hidden) AND add the anchor link in the url bar—so that's why I was searching for another solution. But, in another thread on this community I asked about the specific code I was using and was able to correct the code to prevent the scrolling or adding of anchor links in the url bar. So my issue should be solved now!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo