classList toggle(show) doesn't show the dropdown content
0
I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.
javascript html css web
edited Nov 25 '18 at 22:26
halfer
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
add a comment |
0
I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.
javascript html css web
edited Nov 25 '18 at 22:26
halfer
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
add a comment |
0
0
0
0
I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.
javascript html css web
edited Nov 25 '18 at 22:26
halfer
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.
function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>function myFunction(){
document.getElementById("drop").classList.toggle("show");
} div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>javascript html css web
javascript html css web
edited Nov 25 '18 at 22:26
halfer
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
edited Nov 25 '18 at 22:26
halfer
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
edited Nov 25 '18 at 22:26
halfer
14.6k758113
edited Nov 25 '18 at 22:26
halfer
14.6k758113
edited Nov 25 '18 at 22:26
halfer
14.6k758113
14.6k758113
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
asked Nov 24 '18 at 13:33
Lily ZhengLily Zheng
83
83
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
add a comment |
0
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
You right but there isonclick="myFunction()
– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
add a comment |
0
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458664%2fclasslist-toggleshow-doesnt-show-the-dropdown-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
add a comment |
0
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
add a comment |
0
0
0
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->div.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
edited Nov 24 '18 at 14:03
answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
answered Nov 24 '18 at 13:57
Smollet777Smollet777
1,36011015
1,36011015
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
add a comment |
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
It works! You are excellent!
– Lily Zheng
Nov 24 '18 at 14:01
add a comment |
0
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
You right but there isonclick="myFunction()
– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
add a comment |
0
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
You right but there isonclick="myFunction()
– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
add a comment |
0
0
0
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
answered Nov 24 '18 at 13:52
samuel silvasamuel silva
2915
2915
You right but there isonclick="myFunction()
– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
add a comment |
You right but there isonclick="myFunction()
– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
You right but there is
onclick="myFunction()– Smollet777
Nov 24 '18 at 14:06
You right but there is
onclick="myFunction()– Smollet777
Nov 24 '18 at 14:06
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
ahh ok, I didn't see that :c
– samuel silva
Nov 24 '18 at 14:15
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
I saw that is already fixed
– samuel silva
Nov 24 '18 at 14:16
add a comment |
0
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
add a comment |
0
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
add a comment |
0
0
0
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>function myFunction() {
document.getElementById("inner").classList.toggle('show')
}div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
} <div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>></small></a>
</div>
</div>answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
answered Nov 24 '18 at 14:00
James IvesJames Ives
1,84211433
1,84211433
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458664%2fclasslist-toggleshow-doesnt-show-the-dropdown-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
