This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.
I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)
it works well when i have all the script in HTML but will not work for me when I put the code externally.
ONLY WORKING ON THE ABOUT BUTTON CURRENTLY
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
*
{
margin: 0;
padding: 0;
}
header
{
background-image: url("../images/webBack.jpg");
background-color: powderblue;
height: 100vh;
background-size: cover;
background-position: center;
}
a{
color: black;
}
a:hover{
color:white;
transition-duration: 0.3s;
}
.row{
position: center;
max-width: 95%;
margin: auto;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
.main-nav{
float:right;
list-style:none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.button1 {
background-color: cornflowerblue;
opacity: 0.2;
font-size: 16px;
text-align: center;
padding: 14px 28px;
border: 2px solid black;
transition-duration: 0.2s;
cursor: pointer;
}
.button1:hover{
background-color: cornflowerblue;
color: white;
opacity: 1;
font-size: 18px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
margin-top: 150px;
margin-left: 25%;
padding: 20px;
border: 2px solid whitesmoke;
width: 50%;
height: 50%;
overflow: auto;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body{
font-family: monospace;
}
.Hero{
position: absolute;
margin: 500px;
margin-left: 25%;
margin-top: 0;
pointer-events:none;
}
h1{
color:white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
margin-top: 275px;
}
p{
color: black;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<script src="scripts/main.js"></script>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
</body>
</html>
in the snippet it works...
I am using IntelliJ
maybe something in the HTML?
I can't figure it out.
You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you decide to include Jquery in your HTML then you can do this.
$( document ).ready(function() {
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you want to try the jquery solution just put this in between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
I am only attempting to do a simple modal, and nothing is working right accept the HTML and CSS,
Javascript acts like it is not connected to the HTML sheet at all.
It has a button that i am supposed to click and the event handler should make the popup open but instead, the popup shows up immediately after the page loads, which is totally contrary to my script. Here is the code:
const pop = document.getElementById('pop')
const x = document.getElementById('x')
const overlay = document.getElementById('overlay')
const modal = document.getElementById('modal')
const open = function() {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
const close = function() {
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
pop.addEventListener('click', open, false);
x.addEventListener('click', close, false);
overlay.addEventListener('click', close, false);
.pop {
padding: 10px 15px;
background: #4e8b8f;
border: none;
border-radius: 1.2px;
font-family: Impact;
color: black;
margin-top: 10px;
cursor: pointer;
}
.modal {
background-color: #4e8b8f;
border-radius: 1.3px;
padding: 1rem;
width: 15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
font-family: Impact;
}
.x {
position: absolute;
top: 0;
right: 0;
background-color: transparent;
border: none;
border-radius: 1px;
color: red;
font-size: 10px;
cursor: pointer;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px);
border-radius: 2px;
height: 100%;
width: 100%;
z-index: 5;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<!-----tab header---------------->
<head>
<title>Jalloh Web Construction Home</title>
<link href=Afri-culture.css rel="stylesheet">
<script src="Afri-culture.js"></script>
<link rel="shortcut icon" type="image/jpg" href="jalloh white.jpg">
<meta charset="utf-8" />
</head>
<header name="container">
<!-----nav bar------>
<div class="container">
<img id="clarkweb" src="jalloh.jpg" alt="jalloh web construction">
<nav>
<ul>
<!----- <li>Home</li>----->
<li>About Me</li>
<li>My Hobbies</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
</header>
<h1>Welcome To My Portfolio</h1>
<button class="pop" id="pop">Enter</button>
<div class="modal hidden">
<br>
<button class="x" id="x">x</button>
<img src="smokegif.gif" id="smoke">
<h3>Under Construction</h3>
</div>
<div class="overlay hidden"></div>
<body id=body>
<br>
</body>
</div>
</div>
</div>
<hr>
<div class="container2">
<footer>
<img id="clarktwo" src="jalloh white.jpg" alt="clark web">
</footer>
</div>
</html>
You use document.getElementById('modal'):
const pop = document.getElementById('pop')
...
const modal = document.getElementById('modal')
const open = function() {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
...
pop.addEventListener('click', open, false);
But you don't have id="modal" inside set for it:
<div class="modal hidden">
I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!
var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
showShoppingBtn.addEventListener('click', ()=>{
if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
showShopping.style.display = 'block';
}
else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
showMenu.style.display = 'none';
showShopping.style.display = 'block';
}
else {
showShopping.style.display = 'none';
}
});
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');
menuBtn.addEventListener('click', ()=>{
if(showMenu.style.display == 'none' && showShopping.style.display == 'none'){
showMenu.style.display = 'block';
} else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
showShopping.style.display = 'none';
showMenu.style.display = 'block';
} else {
showMenu.style.display = 'none';
}
});
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin:0;
padding: 0;
}
.top-content{
background: orange;
display: flex;
}
.shopping-menu{
width: 100%;
}
#shopping-cart{
font-size: 2.5em;
cursor: pointer;
padding-right: 0;
float: right;
margin-right: 1em;
}
.top ul{
margin-top: 3em;
list-style: none;
margin-right: 1em;
}
.top li{
padding-right: 1.2em;
margin-bottom: .5em;
text-align: right;
text-transform: uppercase;
}
.top-content-container{
width: 100%;
}
.top-dropdown{
display: none;
}
.site-logo img{
position: absolute;
width: 100vw;
display: none;
}
.bottom{
background-color:#0e1338;
color: white;
display: flex;
position: relative;
}
.menu{
padding-right: 1em;
width: 100%;
}
.menu-button{
float: right;
cursor: pointer;
padding-right: 1em;
}
.bottom-content-container{
margin-left: auto;
margin-right: 0;
text-align: right;
padding-right: 1em;
}
.bottom-content-container ul{
list-style: none;
}
.menu-bar{
width: 3em;
height: .5em;
background-color: white;
margin: .5em 0;
}
.bottom-dropdown{
display: none;
margin-top: 4em;
text-align: right;
}
.bottom-dropdown li{
margin: .7em 0;
text-transform: uppercase;
}
.top li a{
color: black;
text-decoration: none;
}
.bottom li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/header.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<section class="top">
<div class="top-content">
<nav class="shopping-menu">
<i class="fa fa-shopping-cart" id="shopping-cart"></i>
<div class="top-content-container">
<div class="top-dropdown" id="top-dropdown">
<ul>
<li>Cart</li>
<li>Checkout</li>
<li>My Purchases</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="bottom">
<div class="site-logo">
<img src="images/AutoNation-logo.png" alt="AutoNation Logo">
</div>
<nav class="menu">
<div class="menu-button" id="menu-button">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>
<div class="bottom-content-container">
<ul>
<div class="bottom-dropdown" id="bottom-dropdown">
<li>Services</li>
<li>Special Offers</li>
<li>Browse</li>
<li>Contact</li>
<li>Location</li>
<li>My Account</li>
</div>
</ul>
</nav>
</div>
</section>
<script src="scripts/header.js"></script>
</body>
</html>
It's because first time you entered the click function both style.display are not filled. so the condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
one quick solution to use your code is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
When you do element.style.someStyle, you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none.
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
Your HTML is invalid
You really should toggle a class. Add class hide to the menus and have .hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.