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>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="main.css">

    <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!
                              <iframe width="392" height="220" src=";showinfo=0" frameborder="20px" allowfullscreen></iframe>

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 {
      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


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

    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);

Using Jquery syntax you can do this.

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


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.