Мой код показывает и скрывает элементы div в зависимости от того, на какую кнопку нажимает пользователь, реализуя простые операторы myElement.style.display = 'none';
.
Можно ли использовать переходы, когда эти элементы div показаны / скрыты? Т.е. при нажатии кнопки-1 текст, относящийся к кнопке-1, исчезает в виде; при нажатии кнопки-2 текст, относящийся к кнопке-2, исчезает из виду, поскольку предыдущий текст кнопки-1 исчезает ?
Как есть, элементы div отображаются и исчезают из поля зрения. Я ищу более плавный переход.
Я попытался сделать это с кодом, который показан закомментированным. Это просто не работает. Спасибо за любые советы, спасибо.
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%;
}