Need help to change hover to OnClick using Javascript

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

Answers


Add onclick in your li element

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

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>

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>

Need Your Help

Disable puts output in RSpec

ruby rspec progress-bar output stdout

I got a ProgressBar with some logs, and it is being displayed on each iteration. When I run RSpec, I'd like that only the results to get displayed (only . or f, and not the output that my app may

Laravel 5 Routing Issue

php laravel

I am new to laravel. My problem is that If i try to access a route Like this : http://localhost/shivani/public/sitehome , It works perfectly fine.