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
The main issue is that you're using .addClass('hidden') while using .show()
jQuery is a a 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/