I'm new to JavaScript and facing 3 challenges:
1. When I click on the parent <li>, the correct content of the child <sub> does not show up. Each category like "colors, shapes, sizes" should have corresponding child categories like "green, circle, large"; but when I click on the <li>, "large" content appears for all <sub> tags. How can I display the correct content when clicking on a specific <li>?
2. Currently, my code only hides the previous click's content when I click the same <li> again. I want to hide the display of the <li> not only on its second click, but also when I click on a different <li> while displaying the newly clicked <li>'s content simultaneously.
3. I'm attempting to smoothly transition (slide) the <sub> content from behind the <ul>. I have tried using the "transition" property, but it's not working as intended; when I click on an <li>, the <sub> just appears, but I want it to slide out.
Check out the JS Fiddle here: https://jsfiddle.net/6sapmodc/2/
HTML
<blue>
<ul>
<li>Colors
<sub>Green</sub>
</li>
<li>Shapes
<sub>Circle</sub>
</li>
<li>Sizes
<sub>Large</sub>
</li>
</ul>
</blue>
CSS
blue {
float: left;
background-color: orange;
height: 80px;
position: absolute;
z-index: initial;
}
blue ul {
list-style: none;
background-color: gray;
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
blue ul li {
height: 60px;
width: 60px;
background-color: red;
text-align: center;
line-height: 60px;
}
blue ul li:hover {
cursor: pointer;
}
blue ul li sub {
position: absolute;
background-color: pink;
width: 300px;
height: 50px;
z-index: -4;
top: 0;
display: none;
}
Jquery
$(document).ready(function()
{
$("li").click(function()
{
$("sub").toggle();
});
});