Click an icon and it displays a dropdown through javascript

Question

Css:

#header {
    height: 55px;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 6;
    /*background-color: rgba(24,24,29,0.4);*/
    background: url('../images/head1.png');
}

.pageLink {
    margin: auto 18px;
    align-self: center;
    position: relative;
    vertical-align: middle;
    font-size: 0.9em;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pageLink {
    text-decoration: none;
    color: white;
}

.home1 {
    padding-top: 7px;
    padding-right: 20px;
}

#authLink {
    z-index: 500;
    top: 35%;
    right: 0;
    font-size: 0.8em;
    position: absolute;
}

.fa-caret-down {
    color: #cf5630;
}

I have this code:

echo '<span id= "authLink" class= "pointer absolute">';
echo'<span class= "pageLink text" style="border-bottom: none"><i class="fa fa-bell"></i>Hi,';
echo $firstname;
echo '! <i class="fa fa-caret-down"></i> I <i class="fa fa-shopping-cart"></i> </span>';
echo '</span>';

Is it possible for when I click on "fa-caret-down" to display a dropdown box and inside is the "Logout" Link? I tried doing through pure Css but it didn't work, maybe with javascript it will? Can anyone help with this?

I did this now, but it still didnt work! ` ` – sarah Mar 20 '17 at 12:53 — sarah, Mar 20 '17 at 12:53

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Well, Below sample show or hide the dropdown on a image click using javaScript.

$(document).ready(function(){

$("#imageTag").click(function(){
      $("#dropdown_change").toggle();
     });

     $("#dropdown_change").change(function(){
      alert("Selected value is : " + document.getElementById("dropdown_change").value);
     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
click me to show/hide dropdown --> 
<img id ="imageTag" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="80px" /> 
</br>
</br>
</br>
  
 
   <select id="dropdown_change">
 
      <option value="Sunday">Sun</option>
 
      <option value="Monday">Mon</option>
 
      <option value="Tuesday">Tue</option>
 
      <option value="Wednesday">Wed</option>
  
      <option value="Thursday">Thu</option>
  
      <option value="Friday">Fri</option>
  
      <option value="Saturday">Sat</option>
 
</select>
</form>

If you want to expand the options of dropdown, this is the similar questions- How to open select element using jquery

Hoping this will help you.

Happy Coding :)

Click an icon and it displays a dropdown through javascript

1 Answers1