How to hide Divs from onClick event in input

Asked

Viewed 75 times

-3

with a doubt of those. I’m remaking a page a medical site where has a search engine diseases by the letter index,A,B,C,D,E............

On the page, there was a space for the search buttons, I’m picking up to do the evendo, example I clicked on the A button, I have to hide the DIVS, b,c,d,e.... etc.

If you click S you have to hide the Divs, a,b,c,d,e,f,g,h,i,j .... and just stay at S. How can I do this in Jquery or javascript.

 <input type='submit' class="button" onclick="showPage('#A')" value="A"/>
                                <input type='submit' class="button" onclick="showPage('#B')"value="B"/>
                                <input type='submit' class="button" value="C"/>
                                <input type='submit' class="button" value="D"/>
                                <input type='submit' class="button" value="E"/>
                                <input type='submit' class="button" value="F"/>
                                <input type='submit' class="button" value="G"/>
                                <input type='submit' class="button" value="H"/>
                                <input type='submit' class="button" value="I"/>
                                <input type='submit' class="button" value="J"/>
                                <input type='submit' class="button" value="K"/>
                                <input type='submit' class="button" value="L"/>
                                <input type='submit' class="button" value="M"/>
                                <input type='submit' class="button" value="N"/>
                                <input type='submit' class="button" value="O"/>
                                <input type='submit' class="button" value="P"/>
                                <input type='submit' class="button" value="Q"/>
                                <input type='submit' class="button" value="R"/>
                                <input type='submit' class="button" value="S"/>
                                <input type='submit' class="button" value="T"/>
                                <input type='submit' class="button" value="U"/>
                                <input type='submit' class="button" value="V"/>
                                <input type='submit' class="button" value="X"/>
                                <input type='submit' class="button" value="Y"/>
                                <input type='submit' class="button" value="Z"/>
javascript jquery html5 bootstrap-4 javascript-events

  • Face the first step is to change the type='submit' pot type='button' input. Do this and test

2 answers

0


$(document).ready(function(){
    $(".button").click(function(){
         var inputValue = $(this).val();
         if(inputValue){
            //mostra a div com classe correspondente ao Value do input clicado
            $("." + inputValue).show();
            //Esconde as divs class .box e que não tem a classe correspondente ao value do input
            $(".box").not("." + inputValue).hide();
            
         }
    });
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <div> 
        <input type='submit' class="button" value="A"/>
        <input type='submit' class="button" value="B"/>
        <input type='submit' class="button" value="C"/>
        <input type='submit' class="button" value="D"/>
    </div>
    
    <div class="A box">
        Div AAAA
    </div>
    
    <div class="B box">
        Div BBBB
    </div>
    
    <div class="C box">
        Div CCCC
    </div>
    
    <div class="D box">
        Div DDDD
    </div>

  • Leo good morning would have like to do this function of jquery to fetch the ID, envés of the name.

  • @Pedrohenriquesilvadedeus, in your question has no ID. Edit the question by placing the appropriate code

0

I ended up changing the code because I saw that I needed to treat some more conditions.

function showPage(num) 
        {
            if(num.match('A'))
            {
                                
                document.getElementById('A').style.display="block";
                if($('#B').css('display') == 'none')
                {   
                    //alert("hiider");
                    document.getElementById('B').style.display="block"
                }       
                else if($('#B').is(':visible'))
                {
                       // alert("hiddsr");
                    document.getElementById('B').style.display="none"
                }   
                if($('#C').css('display') == 'none')
                {   
                    //alert("hiider");
                    document.getElementById('C').style.display="block"
                }       
                else if($('#C').is(':visible'))
                {
                       // alert("hiddsr");
                    document.getElementById('C').style.display="none"
                }   
               
            }

Now it’s working the way I was asked,

Browser other questions tagged javascript jquery html5 bootstrap-4 javascript-events

You are not signed in. Login or sign up in order to post.