Need help to change hover to OnClick using Javascript

Question

I want to have something like a dropdown menu. I now have a hover in css but I know I have to use javascript to make it clickable. Can anyone help me making it clickable?

This is my current html code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="jumbotron">     
                          <p>What will you be making for dinner tonight?</p> 
                          <li class="inspiration">
                            Give me some inspiration!
                            <div class="recipe">
                            With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!
                            <ul>
                              <iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&amp;showinfo=0" frameborder="20px" allowfullscreen></iframe>
                            <ul>
                            </div>
                          </li>
    </div>
</body>
</html>

and my css:

    .inspiration {
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 15px 20px;
      cursor: pointer;
      color: #012556;
      font-size: 20px;
    }

    .inspiration:hover {
      background: #555;
      color: #012556;
      font-size: 20px;
    }

    .inspiration:hover .recipe {
      display: block;
      opacity: 1;
      visibility: visible;
    }

    .inspiration .recipe {
      display: block;
      padding: 0;
      color: #fff;
      position: center;
      width: 1000px;
      padding-top: 20px;
      padding-bottom: 20px;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
    }

    .jumbotron {
      background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg);
      height: 640px;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
    }

    .jumbotron h1 {
      color: #fff;
      font-size: 42px;  
      font-family: 'Shift', sans-serif;
      font-weight: bold;
      text-align: center;
    }

    .jumbotron p {
      font-size: 20px;
      color: #fff;
      text-align: center;
    }

I still don't get what to put in my javascript file

tech savy · Accepted Answer · 2015-11-25 09:32:44Z

2

Add onclick in your li element

<li class="inspiration" onclick="functionname()">

answered Nov 25, 2015 at 9:32

tech savy

1931 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roger Dwan Over a year ago

And probably need an onmouseout to restore the default view.

Maris Over a year ago

Nothing happens when I add this line.

some_groceries · Accepted Answer · 2015-11-25 10:00:07Z

Using event listeners, and the getComputedStyle() to get the styles and getPropertyValue() to get the visibility property. then using the if else as a toggle for opening and closing the menu dropdown. the css should be visibility: hidden for recipe class

<script>
    var inspiration = document.getElementsByClassName("inspiration");
    var expandMenu = function() {
        var recipe = document.getElementsByClassName("recipe");
        var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility");
        if(CSSprop == "visible"){
            recipe[0].style.visibility = "hidden";
        }else {
            recipe[0].style.visibility = "visible";
        }
    }
    inspiration[0].addEventListener("click", expandMenu);
</script>

Mr Lister · Accepted Answer · 2015-11-30 10:41:10Z

0

Using Jquery syntax you can do this.

Add the following code to <head> tag and from css remove hover.

 <script>
    $(document).ready(function(){
        $(".inspiration").click(function(){
            $("#recepe").toggle();
        });
    });
</script>

edited Nov 30, 2015 at 10:41

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 25, 2015 at 10:06

Rounak Bajoria

12 bronze badges

Collectives™ on Stack Overflow

Need help to change hover to OnClick using Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related