bicycle_guy bicycle_guy - 6 months ago 13
jQuery Question

Div inside a div not appearing?

I am trying to place a div(id="testDiv") inside of a div that slides down from the top using jQuery .slideToggle(). Presently, the div inside the sliding div does not appear at all. Here are some pictures to explain what I mean:

enter image description here

enter image description here

You can run this here, but this is a link to a Plunker with my code just in case:
https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info

Here is the code:



(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});

$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});

$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);

body{
margin:0;
padding: 0;
}

.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}

.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}

#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}

#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}

#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}

.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}

.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}

.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}

#infoDiv {
float: left;
margin-left: 17%;
}

#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}

#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>

<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>

<div class="dropdowns">
<div id="infoDiv">
</div>

<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>

</html>




Answer

Set display: block; for #testDiv

Your .dropdowns div are hidden

Comments