Is it Possible to Hide a Section on Button Press?

Questions
1

Hi there!

I would like to add a call to action above my Fixed header that asks a question and has two buttons with the answers.

image
image1240×179 26.3 KB

I would like to be able to send the user to another page if they click Yes, I want More Traffic and close (hide) the entire section if they click No, I have Enough Traffic.

Any ideas on how I can achieve that?

Thanks! :slight_smile:

2

I was thinking about writing a function in the Files that will listen for an onClick event on the button, but I am hoping there is a more elegant way of doing it directly in the Divhunt UI.

3

Never mind! All I had to do was search! :slight_smile:

Found this tutorial (awesome by the way!) Creating a toggle switch for annual/monthly pricing - #5 by 0xjohn

And that was enough to help me solve this!

4

Hey,

Maybe I missunderstood something, but all you needed to do is to link those two buttons to differnet pages?

5

Hey @Pakic!

I wanted to navigate to a different page when I clicked one of the buttons, but Hide the entire section when I clicked on the other button.

Here is a quick video: Loom | Free Screen & Video Recording Software | Loom

I was able to get the functionality I needed by adding an event listener that adds a class:

$(document).on('click', '.noIHaveEnoughTrafficButton', function() {
    $('.moreTrafficQuestionCta').toggleClass("hidden");
})

This works great as I showed in the video, but on smaller breakpoints, it does not.

So instead … I used jQuery to set the “style” attribute, which sets the styling on the tag level and that overrides the classes coming from the breakpoint.

Here is my new code:

$(document).on('click', '.noIHaveEnoughTrafficButton', function() {
    // Set the style attribute so it overrides any styles coming from a class
    $('.moreTrafficQuestionCta').attr("style", "display: none;");
    console.log("Button clicked");
})