Jengo Jengo - 1 month ago 5
CSS Question

Why element is not showing onClick?

I'm trying to figure out what I am selecting incorrectly. I'm trying to click element one and show sub elements.



function main(){
$('.option-button').hide();
$('.nav-buttons').on('click',function(){
$('option-button').next().toggle();
});
}
$(document).ready(main);

.container {
overflow:auto;
height: 100%;
width: 100%;
border-style: double;
background-color: #1e1e15;
}

.header {
font-family: "Ailerons";
font-size: 125px;
text-align:center;
width: auto;
}
h4{
margin:auto;
color: blue;
}

.nav-bar{
width: 75.5%;
border-style: double;
margin: auto;
padding: 0;
}
.nav-buttons {
list-style-type: none;
overflow: hidden;
background-color: white;
}
.option-button{
list-style-type: none;
overflow: hidden;
background-color: white;
}
li {
float: left;
display: block;
font-family: monospace;
text-align: center;
padding: 14px 44.3;
text-decoration: none;
border-style: dotted;
}

.navigation-pictures {
width: 75%;
height: 75%;
margin:auto;
margin-top: 100px;
border-style: double;
border-color: white;
}

<!DOCTYPE>
<hmtl>
<head>
<title>My Home Page!</title>
<link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
<div class = "container">
<div class = "header">
<img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
</div>
<div class = "nav-bar">
<ul class = "nav-buttons">
<li>Element 1</li>
<ul class ="option-button">
<li>Element 1 Sub Element 1</li>
<li>Element 1 Sub Element 2</li>
</ul>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li style="float:right">Element 6</li>
</ul>
</div>
<div class = "navigation-pictures">
<img src = "images/city1.jpg" alt = "Downtown" height="100%" width="100%"/>
</div>
<div class = "navigation-pictures">
<img src = "images/lighthouse1.jpg" alt = "Lighthouse" height="100%" width="100%"/>
</div>
<div class = "navigation-pictures">
<img src = "images/moutains.jpg" alt = "Moutains" height="100%" width="100%"/>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src='main.js'></script>
</body>
</html>




Answer

I think you want some of:

Put ul in li element and not external. Take click event on li element and not ul.

<ul class = "nav-buttons">
              <li>Element 1<ul class ="option-button">
                  <li>Element 1 Sub Element 1</li>
                  <li>Element 1 Sub Element 2</li>
                </ul>
</li>


$('.nav-buttons li').on('click',function(){
    $(this).find("ul").toggle();
 });
Comments