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.
What am I doing wrong? Can someone fix the code for me?
/* Inserir aqui script para exibir ou ocultar o menu de seleção de cores */
var div = document.getElementById('audiodescription-text');
var display = 1;
function showHidenButtonAudiodescription() {
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";
}
}
/* Inserir aqui script para exibir ou ocultar o menu de seleção de cores */
var div = document.getElementById('options-wrapper');
var display = 1;
function showHidenButtonModel() {
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";
}
}
var config = { /* Insira aqui a URL do modelo tridimensional hospedado no Sketchfab que será carregado. Insira aqui os materiais, os nomes e as cores de cada estrutura. Basicamente, este é o trecho do código que deve ser alterado para se adaptar a cada modelo tridimensional */
"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 /* Aqui termina o conteúdo personalizado de cada modelo tridimensional */
}
]
}
].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);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 */<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">
<!-- Insira aqui a fonte não suportada pelo css -->
<link rel="stylesheet" href="./styles.css">
<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>
<body>
<div id="audiodescription-instructions">
<button_audiodescription id="button_audiodescription" onclick="showHidenButtonAudiodescription()">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">
<!-- Inserir aqui a classe e o texto com as instruções de seleção de cores -->
<p>Selecione a cor desejada para cada estrutura:</p>
</div>
<!-- Inserir aqui o texto com as instruções -->
<button_model id="button_model" onclick="showHidenButtonModel()">Exibir opções de cores</button_model>
<!-- Inserir aqui botão para exibir ou ocultar o menu de seleção de cores -->
<div style="display:none" ; id="options-wrapper">
<!-- Altere aqui o estado inicial de exibição do menu de seleção de cores. display:none ocultará o elemento. display:inherit exibirá o elemento com os padrões de seu elemento-pai -->
<div class="options" id="color-picker"></div>
</div>
</div>
</body>