Question 166172 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress hide/show a div based on a dropdown box selection?

I want to do show/hide div based on dropdown box selection.
And display relevant content / text for each month as in the attached example.
also need after the month passes the option to view the information about it will be automatically removed and so only the relevant content will be displayed.

Can anyone help me with a suitable code please?

enter image description here

Tags:

2

Answers


  1. 0

    Firstly get when user clicks the element document.getElementById("element").onclick = function() and in it document.getElementById("element").style.display = "none"; none for hiding block for showing.

    https://www.geeksforgeeks.org/hide-or-show-elements-in-html-using-display-property/

    See https://www.w3schools.com/howto/howto_js_tabs.asp for complete code and example

    Login or Signup to reply.
  2. 0

    You can do it like this:

    I will have a basic explanation of it at the bottom.

    #birdlist{
  visibility: hidden;
}
    <!DOCTYPE html>
<html>
  
  <body>
  
    <select name="birds" id="birds">
      <option value="parrot" onclick="answer()">Parrot</option>
      <option value="crow" onclick="answer()">Crow</option>
      <option value="macaw" onclick="answer()">Macaw</option>
      <option value="pidgeon" onclick="answer()">pidgeon</option>
    </select>
    
    <div id = birdlist>
    
      <div id=parrotList>
        <p> this is a parrot</p>
      </div>

      <div id=crowList>
        <p> this is a crow </p>
      </div>

      <div id=macawList>
        <p> this is a macaw </p>
      </div>

      <div id=pidgeonList>
        <p> this is a pidgeon </p>
      </div>
      
    </div> 
   
  </body>
  
  <!--javascript section starts here-->
  <script>
  
    var e = document.getElementById("birds");
    
    function answer() {
    
      if (e.value == "parrot") {
        document.getElementById("parrotList").style.visibility = 'visible'; // parrot div
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'hidden';
        

      } else if (e.value == "crow") {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'visible'; // crow div
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'hidden';

      } else if (e.value == "macaw") {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'visible'; // macaw div
        document.getElementById("pidgeonList").style.visibility = 'hidden';

      } else {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'visible'; // pidgeon div
        
      }

    }
  
  </script>
  
  
</html>

    First, we create a drop down selector with the name and id of birds, and set the names of birds to it.

    We then make a div called birdlist and make it hidden in the css to make all the divs within’ it hidden as well, to make our life easier.

    We then create divs for each individual bird with an

    tag inside with the innerHTML of the corresponding bird name, and setting a id to them accordingly as well.

    Then we create a javascript section and assign the drop down value attribute to the variable e, which we can use in the JS.
    We then create a function that will check the drop down value selected by the user with an if statment, and turn the necessary divs visible or invisible as needed.

    Finally, we then assign that function as an onclick in the html section of the selectors.

    Hope this helps!

    js fiddle if needed: https://jsfiddle.net/q0whp3mn/1/

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

Back To Top
Search