Hiding and changing div elements in Jquery

Question

Hi Guys i kindly need your help,i have two buttons on web page when button1 is clicked an arrow appears underneath it and the button's background color changes,when button2 is clicked same applies it but the arrow underneath button1 disappears and the background color changes.

I have implemented most of these properties but i can't figure out why after clicking on button2 the going back to button1 the arrow underneath button2 does not hide.

here is my code

++++++++ HTML +++++++

  $(document).ready(function() { $('#select').click(function(){ $(this).css('background','#1169ff'); $(this).css('color','#ecf0f1'); $('#triangle_down').add('#triangle_down1').show(); if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){ $('#select1').css('background','#ecf0f1'); $('#select1').css('color','#1169ff'); } else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){ $('#triangle_down').add('#triangle_down1').show(); } }); $('#select1').on('click', function() { $(this).css('background','#1169ff'); $(this).css('color','#ecf0f1'); $('#triangle_down').add('#triangle_down1').addClass('hidden'); $('#select').css('background','#ecf0f1'); $('#select').css('color','#1169ff'); $('#triangle_down2').add('#triangle_down3').show(); }); }) 

 #subscribe p{ text-align:center; } #subscribe input { background: rgba(255, 255, 255, 0.52); color: #666666; vertical-align: middle; width: 593px; border: 1px solid rgba(255, 255, 255, 0.76); padding: 0 10px; height: 60px; font-size: 20px; outline: 0; } #subscribe input[type="submit"]{ background: rgb(255, 135, 19); color: #ecf0f1; /*width: auto;*/ padding: 14px 25px; cursor: pointer; margin-left: 50px font-weight: bold; height: 60px; display: inline-block; border: 2px solid; font-size: 20px; outline: 0; } #subscribe button[id="select"],[id="select1"]{ background: #ecf0f1; width: 370px; height: 60px; /*padding-left: 100px;*/ /*padding-right: 100px;*/ padding: 0 10px; vertical-align: middle; font-size: 20px; outline: 0; color: #1169ff; border: 2px solid; text-align:center; } #subscribe input[id="main"] { width: 150px; outline: 0; } #triangle_down { position:absolute; width: 0; height: 0; border-top: 15px solid #1169ff; border-left: 9px solid transparent; border-right: 9px solid transparent; top:125px; left:90px; } #triangle_down1 { position:absolute; width: 0; height: 0; border-top: 20px solid #ecf0f1; border-left: 11px solid transparent; border-right: 11px solid transparent; top:125px; left:88px; } #triangle_down3 { position:absolute; width: 0; height: 0; border-top: 15px solid #1169ff; border-left: 9px solid transparent; border-right: 9px solid transparent; top:125px; left:464px; } #triangle_down2 { position:absolute; width: 0; height: 0; border-top: 20px solid #ecf0f1; border-left: 11px solid transparent; border-right: 11px solid transparent; top:125px; left:462px; } 

 <div id="subscribe"> <form action="" method="post" onsubmit=""> <p> <button type="button" id="select">Acheter</button> <button type="button" id="select1">Louer</button> </p> <!-- Using 2 traingles to achieve border outline :) --> <i id="triangle_down1" style="display: none"><i></i></i> <i id="triangle_down" style="display: none"><i></i></i><br/> <!--Louer triangles --> <i id="triangle_down2" style="display: none"><i></i></i> <i id="triangle_down3" style="display: none"><i></i></i><br/> <div></div> <p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/> <a href="/results"> <input type="submit" id="main" value="Search"/></a> </p> </form> 

Thanks

Answer 1

this does it, look into jquery toggle or other ways of doing this as your code is very hard to work with at the mo. added $('#triangle_down2').add('#triangle_down3').hide(); in the first click f

 $(document).ready(function() { $('#select').click(function(){ $(this).css('background','#1169ff'); $(this).css('color','#ecf0f1'); $('#triangle_down').add('#triangle_down1').show(); if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){ $('#select1').css('background','#ecf0f1'); $('#select1').css('color','#1169ff'); $('#triangle_down2').add('#triangle_down3').hide(); } else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){ $('#triangle_down').add('#triangle_down1').show(); } }); $('#select1').on('click', function() { $(this).css('background','#1169ff'); $(this).css('color','#ecf0f1'); $('#triangle_down').add('#triangle_down1').hide(); $('#select').css('background','#ecf0f1'); $('#select').css('color','#1169ff'); $('#triangle_down2').add('#triangle_down3').show(); }); }) 

 #subscribe p{ text-align:center; } #subscribe input { background: rgba(255, 255, 255, 0.52); color: #666666; vertical-align: middle; width: 593px; border: 1px solid rgba(255, 255, 255, 0.76); padding: 0 10px; height: 60px; font-size: 20px; outline: 0; } #subscribe input[type="submit"]{ background: rgb(255, 135, 19); color: #ecf0f1; /*width: auto;*/ padding: 14px 25px; cursor: pointer; margin-left: 50px font-weight: bold; height: 60px; display: inline-block; border: 2px solid; font-size: 20px; outline: 0; } #subscribe button[id="select"],[id="select1"]{ background: #ecf0f1; width: 370px; height: 60px; /*padding-left: 100px;*/ /*padding-right: 100px;*/ padding: 0 10px; vertical-align: middle; font-size: 20px; outline: 0; color: #1169ff; border: 2px solid; text-align:center; } #subscribe input[id="main"] { width: 150px; outline: 0; } #triangle_down { position:absolute; width: 0; height: 0; border-top: 15px solid #1169ff; border-left: 9px solid transparent; border-right: 9px solid transparent; top:125px; left:90px; } #triangle_down1 { position:absolute; width: 0; height: 0; border-top: 20px solid #ecf0f1; border-left: 11px solid transparent; border-right: 11px solid transparent; top:125px; left:88px; } #triangle_down3 { position:absolute; width: 0; height: 0; border-top: 15px solid #1169ff; border-left: 9px solid transparent; border-right: 9px solid transparent; top:125px; left:464px; } #triangle_down2 { position:absolute; width: 0; height: 0; border-top: 20px solid #ecf0f1; border-left: 11px solid transparent; border-right: 11px solid transparent; top:125px; left:462px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="subscribe"> <form action="" method="post" onsubmit=""> <p> <button type="button" id="select">Acheter</button> <button type="button" id="select1">Louer</button> </p> <!-- Using 2 traingles to achieve border outline :) --> <i id="triangle_down1" style="display: none"><i></i></i> <i id="triangle_down" style="display: none"><i></i></i><br/> <!--Louer triangles --> <i id="triangle_down2" style="display: none"><i></i></i> <i id="triangle_down3" style="display: none"><i></i></i><br/> <div></div> <p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/> <a href="/results"> <input type="submit" id="main" value="Search"/></a> </p> </form> 

Answer 2

The main issue is that you're using .addClass('hidden') while using .show()

jQuery is aa bit fickle when it comes to show, hide, and toggle, but they impose an inline style on that element to either display: hidden or display: show . Your class 'hidden' is being overriden by the in line style placed by jQuery.

Just be consistent when you're showing and hiding things. Either use in line styles, such as adding/removing classes of 'hidden' or 'shown', or using the .show() , .hide() , and .toggle() functions from jQuery.

I cleaned up the code, and put it all in a jsfiddle. Hope this helps https://jsfiddle.net/agayn7yn/

Answer 3

Youre not hiding the triangle divs, youre just adding a class 'hidden' which doesnt actually apply any css properties.

instead of addClass('hidden') you want to use hide()

this will use inline styling to show/hide the div which insures the highest level of css specificity