Question 101602 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – hide / show div with a button not in the same div

I’m using elementor for my wordpress site and I wish to have a button in a first div (section) that control if a second and separate div (section) is display or not. I’ve tried to use the checkbox hack but it’s working only if the checkbox is in the div as the content https://css-tricks.com/the-checkbox-hack/

Is there a solution to use CSS or even javascript ? If you advice to me to use javascript I’ll put in my function.php file and as I’m begginer in javascript can you please write all the function I have to implement into my function.php file.

Basically it means :

<div>button</div> <div>content to show and hide on click on the button</div>

Best regards,
Clément

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for all of yours answers! Here what I use:

    <button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() {
var x = document.getElementById("myDiv");
if (x.style.display === "block") {
    x.style.display = "none"; } 
else {
x.style.display = "block";}}

    Best regards, Clément


  2. 0

    You can use Jquery:

    1-Put an id to your DIV

    <div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>

    2-Call jquery to display it

    $("#btn_show").click(function(){
 $("#show").show();
  //or
 $("#show").hide();
});

    And jquery you can call it with CDN

    <script src="https://code.jquery.com/jquery-3.6.0.js"</script>
    Login or Signup to reply.
  3. 0

    In javascript without any library this could be very easy but you need to put an id on your divand your button.

    <div id="myButton">button</div> 
<div id="myDiv">
  content to show and hide on click on the button
</div>

    Then you just add a script section like this : (it just need to be after your div and your button in the DOM)

    <script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => {
  myDiv.classList.toggle('visible'):
});
</script>

    And at last, you need a css like this:

    .visible {
  display: none;

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search