JavaScript is frequently used to display or conceal content based on user behavior. In this post, I will use Javascript and basic CSS to show and hide a piece of content when Gform’s button is triggered. So the following scenario is what I am aiming for:
Assign “hide” CSS ID to the “Inner section #1“
Assign “show” CSS ID to the “Inner section #2“
Now, we’ll add a basic CSS to hide the “Inner section #2” because based on our scenario that is the content box that we want to show when the button is clicked. add the following CSS to hide the section:
#show {
display: none;
}
Next is where the magic happens. Its time to add the following script to the script organizer:
$(document).ready(function(){
$("BUTTON-ID-GOES-HERE").click(function(){
$("SECTION-CSS-ID-GOES-HERE").hide(1000);
});
$("BUTTON-ID-GOES-HERE").click(function(){
$("SECTION-CSS-ID-GOES-HERE").show();
});
});
In this example our code looks like this:
//Import the following jquery library if needed otherwise no need to have a duplicated jquery.
//In my live versions it was required to have this version of the jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#gform_next_button_7_6").click(function(){
$("#hide").hide(1000);
});
$("#gform_next_button_7_6").click(function(){
$("#show").show();
});
});
</script>
We’re done now you can click here to see the live version and click here to see another example from the Gant system website. I hope you found it useful and enjoyed reading this post.
✌️