CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leo
Leo

Reputation: 45

How do I toggle a hidden divider to show in HTML?

I have written some HTML and CSS code to create a simple website; now I am trying to implement Javascript and want to make the div class='drop_cont show. How is that done? Note: display default 'none'

The code is displayed below:

var main = function() {
  $('.button').click(function() {
    document.getElementbyID('drop_cont').classList.toggle('show');
  });
};

$(document).ready(main);
body{
  background-image: url(whatsapp-background.jpg)
}

.nav {
  background-color:rgba(105, 188, 88, 0.5);
  overflow:hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  /* display: inline-block;  div wraps content */

}

.nav a {
  color: #000000;
  float: left;
  display:block;
  tex-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 1rem;
  border-right: 2px solid black;
}

.nav a:hover {
  background-color:#ccc9c9;
}

h1{
  color:#faffd6;
  text-align: center;
  font-size: 3rem;
  text-shadow: 0 0 5px #69bc58;
}

.h1_div{
  text-align: center;
}

.drop_cont{
  display:none;
}
<!DOCTYPE html>
<html>
<head>
  <title>Test1</title>
<link rel='stylesheet' type='text/css' href='CSS1.css'/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class='h1_div'>
<h1>Test1</h1>
</duv>
<div class='nav'>
  <a href='#home'>Selector#1</a>
  <a>Selector#2</a>
  <a>Selector#3</a>
</div>
<div class='drop'>
<button class='button'>Press me!</button>
  <div id='drop_cont' class='drop_cont'>
    <a href='#home'>Home</a>
  </div>
</div>

<script src="JS1.js"></script>
</body>
</html>

I can not figure out if it is just a syntax error in my JS code or if the entire code is faulty.

Thank you for any help in advance.

Upvotes: 1

Views: 936

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can use $('#drop_cont').toggle('.show');

Note: this will make it hide/show when you press the button if you just want it to show, use .show()

var main = function() {
  $('.button').click(function() {
    $('#drop_cont').toggle('.show');
  });
};

demo

var main = function() {
  $('.button').click(function() {
    $('#drop_cont').toggle('.show');
  });
};

$(document).ready(main);
body {
  background-image: url(whatsapp-background.jpg)
}

.nav {
  background-color: rgba(105, 188, 88, 0.5);
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  /* display: inline-block;  div wraps content */
}

.nav a {
  color: #000000;
  float: left;
  display: block;
  tex-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 1rem;
  border-right: 2px solid black;
}

.nav a:hover {
  background-color: #ccc9c9;
}

h1 {
  color: #faffd6;
  text-align: center;
  font-size: 3rem;
  text-shadow: 0 0 5px #69bc58;
}

.h1_div {
  text-align: center;
}

.drop_cont {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Test1</title>
  <link rel='stylesheet' type='text/css' href='CSS1.css' />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
  <div class='h1_div'>
    <h1>Test1</h1>
    </duv>
    <div class='nav'>
      <a href='#home'>Selector#1</a>
      <a>Selector#2</a>
      <a>Selector#3</a>
    </div>
    <div class='drop'>
      <button class='button'>Press me!</button>
      <div id='drop_cont' class='drop_cont'>
        <a href='#home'>Home</a>
      </div>
    </div>

    <script src="JS1.js"></script>
</body>

</html>

Upvotes: 2

Corentin Branquet
Corentin Branquet

Reputation: 241

You can achieve it like this : 

$('.button').click(function() {
  $('drop_cont').show();
});

Upvotes: 0

Related Questions