CODEWITHSUNDEEP
javascriptjquerycsshtml
mich kent
mich kent

Reputation: 63

hide show with support of html5

I need some help. when I click THIS IS 1 and THIS IS 2 the input box comes my problem is. I want to click THIS IS 1 and brings input box to THIS IS 1 not clicking THIS IS 2 and still brings input box to THIS IS 1. so I want when I click THIS IS 1 input box comes below THIS IS 1 when I click THIS IS 2 the input box comes below to THIS IS 2 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    </head>

    <body>
    <span onclick="MFunction()">THIS IS 1</span>
    <p></p>
    <span onclick="MFunction()">THIS IS 2</span>
    <div id="showhide" style="display:none;">
                        <input type="text"  required>
                        <br></br>
                    <button  class="btn btn-md-2 btn-primary">submit</button> 
                    </div>
    <script>
    function MFunction() {
        var x = document.getElementById("showhide");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
    </script>
    </body>
    </html>

Upvotes: 0

Views: 196

Answers (1)

Nimitt Shah
Nimitt Shah

Reputation: 4587

If you want to use same showhide div to display under the clicked element than you might need to use insertBefore on click.

See Snippet below:

function MFunction(event) {
        var x = document.getElementById("showhide");
        if (x.style.display === "none") {
            x.style.display = "block";
        }
        
        x.parentNode.insertBefore(x, event.target.nextSibling);
    }
    document.addEventListener('click', function(event){
    	if(event.target.className.includes("thisis")){
      	MFunction(event);
      }
    });
    
    //document.getElementById("thisis1").addEventListener("click", MFunction);
    //document.getElementById("thisis2").addEventListener("click", MFunction);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    </head>

    <body>
    <span id="thisis1" class="thisis">THIS IS 1</span>
    <p></p>
    <span id="thisis2" class="thisis">THIS IS 2</span>
    <p></p>
    <span id="thisis3" class="donotshow">DO NOT SHOW ON THIS IS</span>
    <div id="showhide" style="display:none;">
                        <input type="text"  required>
                        <br><br>
                    <button  class="btn btn-md-2 btn-primary">submit</button> 
                    </div>
    </body>

You can also test it here

Update 1:

I have updated the answer to add single click event for multiple elements. You can test it here

Upvotes: 1

Related Questions