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

do you have a codepen or fiddle for this? Also, doesn't seem like you'll ever enter your `else if` condition because your `if` will always evaluate to true, because it will return a jquery object — Andrew Kim, Jan 21 '16 at 21:17
you haven't included jquery in your snippet, also looks like jquery toggle would have been better, back in a mo — Billy, Jan 21 '16 at 21:22
@Billy am working with meteor.js Jquery is already included in it. — Edward Okech, Jan 21 '16 at 22:01
you haven't included it in your code snippet here though. when you're posting code it has boxes at the top to include jquery and other libraries. — Billy, Jan 21 '16 at 22:15

score 0 · Answer 1 · answered Jan 21 '16 at 21:27

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>

Guys thank you all for your assistance especially @jdlam, your suggestion on using toggle worked, i also added an if clause to check weather the other down arrow is showing using toggle's inline-style 'show' then then toggle the arrow and the code works perfectly :D [link] (https://jsfiddle.net/agayn7yn/3/) — Edward Okech, Jan 22 '16 at 03:41

jdlam · Accepted Answer · 2016-01-21T21:35:35.387

0

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/

edited Jan 21 '16 at 21:35

answered Jan 21 '16 at 21:30

jdlam

223
3
11

Thanks alot it has worked for the arrows..but the background color for select1 not changing when select is clicked but that's not an issue i have fixed..anyway thanks – Edward Okech Jan 21 '16 at 21:52
No problem @EdwardOkech, just be sure to upvote and accept my answer :) – jdlam Jan 21 '16 at 21:56

score 0 · Answer 3 · answered Jan 21 '16 at 21:31

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

Hiding and changing div elements in Jquery

3 Answers3