levent001's questions

Estou usando a detailstag maravilhosa da seguinte maneira, que expande o conteúdo quando um link é clicado:

summary::marker {
  content: " ";
}

summary {
  color: blue;
  text-decoration: underline;
  cursor: pointer;

}

<details>
  <summary>Show Details</summary>
  <h2>HTML Details</h2>
  <p>Explanation of the topic</p>
</details>

Esta tag permite incluir todos os tipos de tags HTML, incluindo imagens a serem incluídas nos detalhes expandidos.

Por exemplo, o código acima mostrará primeiro o seguinte:

e quando o link "Mostrar detalhes" for clicado, o HTML será expandido para aquele tópico específico:

Observe que na forma expandida, o termo "Teorema de Pitágoras" está em negrito, pois usei a btag.

Funciona bem.

Mas me deparei com uma situação em que uma única página contém cerca de 300 desses tópicos, e "Mostrar detalhes" para cada um deles inclui cerca de 3 arquivos de imagem cada.

Isso significa que terei cerca de 900 imagens carregadas naquela página assim que alguém a visitar. Isso não é bom, pois o carregamento será lento e o visitante poderá clicar em apenas 1 ou 2 tópicos em expansão. Portanto, não é necessário carregar todas as 900 imagens.

Eu estava procurando uma personalização que permitisse que, ao clicar no link "Mostrar Detalhes" de um tópico específico, apenas aquele HTML específico fosse carregado e exibido. Combinar AJAX/JS é uma solução, mas o AJAX tem a limitação de não fechar o link expandido anteriormente automaticamente.

Algo como combinar a detailstag e o AJAX, de modo que a expansão de uma mostre aquela imagem específica e feche a outra imagem. ( detailsa tag permite que apenas um elemento clicado seja exibido e fecha automaticamente o clicado anteriormente).

Estou tentando configurar um cronômetro no meu site usando Javascript e CSS:

var h3 = document.getElementsByTagName("h3");
h3[0].innerHTML = "Countdown Timer With JS";

var sec = 1800,
  countDiv = document.getElementById("timer"),
  secpass,
  countDown = setInterval(function () {
      'use strict';

      secpass();
  }, 1000);

function secpass() {
  'use strict';

  var min     = Math.floor(sec / 60),
      remSec  = sec % 60;

  if (remSec < 10) {

      remSec = '0' + remSec;

  }
  if (min < 10) {

      min = '0' + min;

  }
  countDiv.innerHTML = min + ":" + remSec;

  if (sec > 0) {

      sec = sec - 1;

  } else {

      clearInterval(countDown);

      countDiv.innerHTML = 'countdown done';

  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    font: normal bold 16px/normal tahoma;
}

article {
    width: 300px;
    text-align: center;
    background-color: #68b04d;
    border-radius: 10px;
    margin: 50px auto 20px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 3px 3px 10px #ccc;
}

article h3 {
    padding: 10px;
    color: #fff;
}
article .count {
    padding: 5px;
}
article #timer{
    padding: 5px;
    color: crimson;
    background-color: aliceblue;
    border-radius: 2px;
}

<!-- Creat Countdown Timer -->
<article class="clock" id="model3">
  <h3></h3>

  <div class="count">
    <div id="timer"></div>
  </div>
</article>

O modelo de trabalho está em https://codepen.io/falak786/pen/oddYYd

O que eu NÃO quero é o título que atualmente está assim no código JS:

h3[0].innerHTML = "Countdown Timer With JS";

Então eu mudo para

h3[0].innerHTML = "";

Ainda assim, o problema é que HEIGHT NÃO está indo embora. Ele está permanecendo fixo, como mostrado pelo marcador azul:

Também tentei alterar a <h3>configuração da tag no meu arquivo CSS e também alterar o <h3>nome da tag no código acima para um <hz>nome de tag aleatório, mas a altura ainda permanece lá, sem texto.

O que posso fazer para remover essa altura?

Estou exibindo os resultados em uma tabela HTML para respostas certas e erradas.

Cada pergunta tem um "Explain Link" como a última coluna da tabela. Se clicado, quero um novo DIV ou SPAN aberto adjacente a ele no lado direito (expanda conforme necessário). Ele mostrará a explicação detalhada para aquela pergunta em particular. Ele incluirá texto que pode ser formatado em HTML com tags h2, h3, p e também pode incluir imagens (tipo "<img src"). Clicar novamente na mesma pergunta ou em uma pergunta diferente "Explain Link" deve fechar aquele DIV ou SPAN aberto.

Foi isso que eu tentei:

Javascript:

<script>
    $(function () {
        $('#button-1').click(function(){
            $('#popup-1').animate({height:'500px'}, 500);
        });
    });
</script>

HTML:

<tr><td>Q.2<td>C<td>C<td>&#9989;<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>

CSS:

#popup-1{
    height: 0px;
    width: 100%;
    float: right;
    overflow: hidden;
    background: #efefef;
}

Alguma informação sobre o que está errado e como corrigi-lo?