I’m new to programming and would appreciate help from someone patient, because my I’m trying to improve my knowledge. I can easily learn by comparing code I wrote with an improved version, where I can see exactly where changes were made.
I create two divs (audiodescription-text and options-wrapper). I want to toggle their visibility independently. In other words, the visibility of one div doesn’t affect another one’s visibility. That’s why I created 2 buttons, one for each div.
However, with the following code, when you click in any button, the same div is hidden or shown.
(I posted the full code here, because it’s easier for testing, instead of posting a fragment of code that cannot generate a working webpage).
Can someone help me with the parts of the code that need to be changed for the divs to be shown or hidden independently?
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sketchfab Configurator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<body>
<div id="audiodescription-instructions">
<button_audiodescription id="button_audiodescription" onclick="showHideButtonAudiodescription()">Exibir audiodescrição</button_audiodescription>
<div style="display:none"; id="audiodescription-text"><p>
[AUDIODESCRIÇÃO: representação tridimensional colorida de uma célula eucariótica seccionada, ou seja, cortada ao meio para mostrar as principais estruturas constituintes.<br><br>
Para facilitar a compreensão e considerando a posição inicial em que o modelo tridimensional é carregado, a apresentação e a descrição das estruturas são feitas da esquerda para a direita e de fora para dentro, ou seja, as mais externas primeiro e em seguida as mais internas. Inicialmente são descritas as estruturas em primeiro plano, para depois serem descritas as estruturas em planos mais ao fundo.<br><br>
A célula eucariótica apresenta formato irregular, mais próximo do arredondado, sendo delimitada pela membrana plasmática com superfície é lisa. Internamente, apresenta citoplasma e organelas.<br><br>
Em uma célula real as organelas não possuem posição fixa, podendo variar de localização. Neste modelo tridimensional, em primeiro plano e à esquerda, encontram-se lisossomos, pequenas organelas de formato arredondado. Mais à direita está o Complexo de Golgi formado por sacos achatados e empilhados, interconectados por vesículas. Um pouco mais atrás, e à esquerda do lisossomo, encontra-se um endossomo, com formato arredondado similar aos lisossomos, porém de maior diâmetro. Segue-se o retículo endoplasmático rugoso, rede de cisternas e túbulos interconectados que possuem ribossomos aderidos à sua face externa, os quais estão representados como pequenos grânulos arredondados. À direita do retículo endoplasmático rugoso, está uma mitocôndria, de formato alongado e cilíndrico e com cristas mitocondriais de formato ondulado em seu interior. Logo atrás está um proteassomo, estrutura pequena, de formato cilíndrico, cujas extremidades apresentam projeções. Do lado direito do proteassomo está o retículo endoplasmático liso, formado por tubos alongados interconectados. Do lado direito do retículo endoplasmático liso está o núcleo, grande esfera com superfície lisa, dotada de poros circulares. O núcleo está seccionado de forma a mostrar, em sua região central, o nucléolo de formato também esférico. Finalmente, ao fundo, no extremo esquerdo, encontram-se dois centríolos de formato cilíndrico e dispostos perpendicularmente um ao outro, e no extremo direito, dois peroxissomos, organelas de formato circular semelhante ao endossomo e ao lisossomo.<br><br>
FIM DA AUDIODESCRIÇÃO.]</p>
</div>
</div>
<div class="sketchfab-container">
<iframe
src=""
id="api-frame"
allow="autoplay; fullscreen; xr-spatial-tracking"
xr-spatial-tracking
execution-while-out-of-viewport
execution-while-not-rendered
web-share
allowfullscreen
mozallowfullscreen="true"
webkitallowfullscreen="true"
height="1000"
width="100%"
></iframe>
<div id="model-instructions">
<p>Selecione a cor desejada para cada estrutura:</p>
<button_model id="button_model" onclick="showHideButtonModel()">Exibir opções de cores</button_model>
<div style="display:none"; id="options-wrapper">
<div class="options" id="color-picker">
</div>
</div>
</body>
<script>
var div = document.getElementById('audiodescription-text');
var display = 1;
function showHideButtonAudiodescription()
{
if (display == 0)
{
div.style.display = 'none';
display = 1;
document.querySelector("button_audiodescription").innerHTML = "Exibir audiodescrição";
}
else
{
div.style.display = 'inherit';
display = 0;
document.querySelector("button_audiodescription").innerHTML = "Ocultar audiodescrição";
}
}
</script>
<script>
var div = document.getElementById('options-wrapper');
var display = 1;
function showHideButtonModel()
{
if (display == 0)
{
div.style.display = 'none';
display = 1;
document.querySelector("button_model").innerHTML = "Exibir audiodescrição";
}
else
{
div.style.display = 'inherit';
display = 0;
document.querySelector("button_model").innerHTML = "Ocultar audiodescrição";
}
}
</script>
<script type="text/javascript" src="./assets/js/sketchfab-viewer-1.3.2.js"></script>
<script type="text/javascript" src="./assets/js/SketchfabConfigurator-1.0.6.js"></script>
<script type="text/javascript">
var config = {
"model": "066fa44695014754ad13f0e69ddda1c3",
"params": {
"camera": 0,
"autoplay": 0,
"preload": 1,
"ui_controls": 0,
"ui_infos": 0,
"ui_watermark": 0
},
"config": [
{
"name": "01. Parede Celular",
"type": "color",
"material": "Parede",
"default": "#b27e00",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313518707
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313518707
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313518707
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313518707
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313518707
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313518707
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313518707
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313518707
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313518707
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313518707
}
]
},
{
"name": "02. Cílios",
"type": "color",
"material": "Cilios",
"default": "#a9821b",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313690276
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313690276
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313690276
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313690276
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313690276
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313690276
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313690276
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313690276
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313690276
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313690276
}
]
},
{
"name": "03. Membrana Plasmática",
"type": "color",
"material": "Membrana",
"default": "#e7710c",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313830703
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313830703
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313830703
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313830703
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313830703
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313830703
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313830703
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313830703
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313830703
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313830703
}
]
},
{
"name": "04.Citoplasma",
"type": "color",
"material": "Citoplasma",
"default": "#e7e7e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313956926
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313956926
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313956926
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313956926
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313956926
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313956926
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313956926
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313956926
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313956926
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313956926
}
]
},
{
"name": "05. Ribossomos",
"type": "color",
"material": "Ribossomos",
"default": "#e300e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314141902
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314141902
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314141902
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314141902
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314141902
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314141902
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314141902
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314141902
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314141902
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314141902
}
]
},
{
"name": "06. Material Genético",
"type": "color",
"material": "Material Genetico",
"default": "#00c8e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314249006
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314249006
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314249006
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314249006
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314249006
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314249006
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314249006
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314249006
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314249006
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314249006
}
]
},
{
"name": "07. Plasmídio",
"type": "color",
"material": "Plasmidio",
"default": "#0011e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314352195
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314352195
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314352195
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314352195
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314352195
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314352195
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314352195
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314352195
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314352195
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314352195
}
]
},
{
"name": "08. Flagelo",
"type": "color",
"material": "Flagelo",
"default": "#834520",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314449619
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314449619
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314449619
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314449619
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314449619
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314449619
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314449619
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314449619
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314449619
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314449619
}
]
}
].map((e) => {
return {
...e,
options: e.options.map((f) => ({
color: f.color,
id: f.id,
})),
};
})
};
var iframeEl = document.getElementById('api-frame');
var optionsEl = document.querySelector('.options');
var configurator = new SketchfabConfigurator.Configurator(iframeEl, optionsEl, config);
</script>
Here is the styles.css
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Quicksand', sans-serif; /* Altere aqui a fonte e o tamanho da fonte */
box-sizing: border-box;
font-size: 12px;
}
#audiodescription-instructions {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_audiodescription{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_audiodescription:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#audiodescription-text {/* Criar aqui uma classe para conter a interface de seleção de cores */
margin: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.12px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
}
.sketchfab-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 900px;
overflow: hidden; /* Oculte aqui a barra de rolagem */
}
iframe {
width: 100%;
height: 70%;
margin-bottom: 0px; /* Oculte aqui a borda */
border: none;
}
#model-instructions { /* Criar aqui uma classe para exibir texto com instrução de seleção de cores. Este será o elemento-pai */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_model{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_model:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#options-wrapper {/* Criar aqui uma classe para conter a interface de seleção de cores */
width: 100%;
display: flex;
flex-direction:row;
justify-content: center;
margin: 20px
}
.options {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0 50px;
}
.option {
display: flex;
flex-direction: column;
gap: 4px; /* Altere aqui o espaçamento entre o nome da estrutura e os quadrados de cores. O espaçamento original é 8px */
padding: 12px 0; /* Altere aqui o espaçamento geral entre as linhas. O espaçamento original é 16px */
}
.color {
display: flex;
align-items: center;
padding: 1px 0; /* Altere aqui o espaçamento entre as linhas no menu de seleção de cores. O espaçamento original é 4px */
}
.color input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option__control {
display: flex; /* Altere aqui o espaçamento horizontal entre os quadrados de cores. O espaçamento original é 8px */
gap: 3px;
}
.color__swatch {
display: inline-block;
width: 24px;
height: 24px; /* Altere aqui a curvatura da borda do quadrado de cores. A curvatura orginal é 8px */
border-radius: 4px; /* Altere aqui o tamanho do quadrado de cores. O tamanho original é 25px */
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin-right: 4px;
}
.color input:checked + .color__swatch { /* Altere aqui a borda da cor atualmente atribuída a determinada estrutura. A cor original é #000 */
box-shadow: 0 0 0 2px #fff;
}
.color:hover .color__swatch {
box-shadow: 0 0 0 2px #999;
}
.texture {
display: block;
position: relative;
margin-bottom: 10px;
}
.texture input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.texture__preview {
display: block;
}
.texture__preview img {
display: block;
max-width: 100%;
height: auto;
}
.texture input:checked + .texture__preview > img {
box-shadow: 0 0 0 2px #000;
}
.texture__name {
display: block;
margin-top: 4px;
} /* Aqui termina o conteúdo do arquvo styles.css */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Quicksand', sans-serif; /* Altere aqui a fonte e o tamanho da fonte */
box-sizing: border-box;
font-size: 12px;
}
#audiodescription-instructions {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_audiodescription{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_audiodescription:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#audiodescription-text {/* Criar aqui uma classe para conter a interface de seleção de cores */
margin: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.12px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
}
.sketchfab-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 900px;
overflow: hidden; /* Oculte aqui a barra de rolagem */
}
iframe {
width: 100%;
height: 70%;
margin-bottom: 0px; /* Oculte aqui a borda */
border: none;
}
#model-instructions { /* Criar aqui uma classe para exibir texto com instrução de seleção de cores. Este será o elemento-pai */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_model{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_model:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#options-wrapper {/* Criar aqui uma classe para conter a interface de seleção de cores */
width: 100%;
display: flex;
flex-direction:row;
justify-content: center;
margin: 20px
}
.options {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0 50px;
}
.option {
display: flex;
flex-direction: column;
gap: 4px; /* Altere aqui o espaçamento entre o nome da estrutura e os quadrados de cores. O espaçamento original é 8px */
padding: 12px 0; /* Altere aqui o espaçamento geral entre as linhas. O espaçamento original é 16px */
}
.color {
display: flex;
align-items: center;
padding: 1px 0; /* Altere aqui o espaçamento entre as linhas no menu de seleção de cores. O espaçamento original é 4px */
}
.color input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option__control {
display: flex; /* Altere aqui o espaçamento horizontal entre os quadrados de cores. O espaçamento original é 8px */
gap: 3px;
}
.color__swatch {
display: inline-block;
width: 24px;
height: 24px; /* Altere aqui a curvatura da borda do quadrado de cores. A curvatura orginal é 8px */
border-radius: 4px; /* Altere aqui o tamanho do quadrado de cores. O tamanho original é 25px */
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin-right: 4px;
}
.color input:checked + .color__swatch { /* Altere aqui a borda da cor atualmente atribuída a determinada estrutura. A cor original é #000 */
box-shadow: 0 0 0 2px #fff;
}
.color:hover .color__swatch {
box-shadow: 0 0 0 2px #999;
}
.texture {
display: block;
position: relative;
margin-bottom: 10px;
}
.texture input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.texture__preview {
display: block;
}
.texture__preview img {
display: block;
max-width: 100%;
height: auto;
}
.texture input:checked + .texture__preview > img {
box-shadow: 0 0 0 2px #000;
}
.texture__name {
display: block;
margin-top: 4px;
} /* Aqui termina o conteúdo do arquvo styles.css */