O texto pode ser oculto e mostrado usando apenas CSS (sem código JavaScript)? [fechadas]

86

É possível mostrar e ocultar texto usando um link apenas com CSS - sem usar JavaScript?

Por exemplo: nesta página

Observe o link "Mais". Quando você clica nele, ele exibe o texto. Este exemplo específico é JavaScript, mas não tenho certeza se pode ser feito com CSS puro.

css user3188544
fonte
2
Outro exemplo de site somente CSS (com menus) é grc.com (Steve Gibson da Security Now ).
Peter Mortensen
1
Possíveis duplicatas: 1 2
user202729
Possível duplicata de Hide Show content-list com apenas CSS, sem javascript usado
jww
Dê uma olhada lá: Alternar barra lateral apenas com CSS Há dois exemplos, um exigindo um clique (usando a caixa de seleção oculta) e outro usando o foco )
F. Hauri
@ Fechar eleitores: Explique-se.
Boann,

Respostas:

107

Existe o <details>elemento , que ainda não está embutido no Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>
Expandir snippet

Não tenho certeza de como é difícil estilizar de forma consistente em todos os navegadores.

Há um hack de caixa de seleção comum (onde a caixa de seleção pode ser oculta e o rótulo pode ser estilizado para se parecer com qualquer coisa):

#more:not(:checked) ~ #content {
  display: none;
}
<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>
Expandir snippet

mas nem sempre (talvez nunca? hmm) apropriado usá-lo; geralmente você pode simplesmente voltar a mostrar o conteúdo quando o JavaScript falha ao carregar e ter o link “mais” para ele.

Há também :target, mas provavelmente é ainda menos apropriado, uma vez que é mais difícil de construir no mecanismo de fechamento.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}
<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>
Expandir snippet

Ry-
fonte
8
Existem grandes usos legítimos para o método da caixa de seleção. Considere um formulário como este exemplo que criei .
misterManSam
7
Não entendi por que você acha :checkedou :targetnunca seria apropriado. Afinal, eles existem.
Konrad Rudolph de
@KonradRudolph A única coisa que consigo pensar é no idrequisito, tornando mais difícil de usar para páginas dinâmicas. Embora não seja uma boa razão, IMO - esse padrão de caixa de seleção oculto é muito antigo, não é difícil de entender e você pode usar um hash como parte do ID em situações dinâmicas.
Izkata de
3
@KonradRudolph: pode nunca ser apropriado expandir o conteúdo com um link “mais” . Particularmente :target- o conteúdo desaparece se você criar um link para qualquer outro lugar. :checkedsignifica que você não pode vincular dentro da expansão e, se ocultar a caixa de seleção, terá que tornar o rótulo focalizável no teclado. Como para qualquer um deles funcionar, o conteúdo já deve estar lá, eu apenas o mostraria por padrão e usaria JavaScript para fornecer o aprimoramento na maioria dos casos.
Ry-
@misterManSam: Este não é um link “mais”, é um formulário real.
Ry-
39

Sim , isso é possível com CSS puro. Você pode clicar em um elemento usando o :checkedatributo de uma caixa de seleção em combinação com <label>o foratributo de um elemento .

Como a caixa de seleção pode ser desmarcada , você pode usar isso para alternar a visibilidade simplesmente adicionando visibility: hiddena um elemento proveniente de :checked(assim que a caixa de seleção for clicada novamente, este pseudo-seletor será inválido e o seletor de CSS não corresponderá mais ao destino).

Isso pode ser estendido para um <label>com o uso do foratributo, de modo que você possa ocultar completamente a própria caixa de seleção e aplicar seu próprio estilo <label>diretamente.

O seguinte usa o combinador irmão adjacente ( +) para alternar a classe togglequando o <label>elemento é clicado:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}
<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>
Expandir snippet

Idade Obsidiana
fonte
3
Isso é o que permite que o CSS passe a regra 110 e seja considerado Turing completo eli.fox-epste.in/rule110
ESR
17

Sim, você pode fazer isso facilmente usando apenas CSS. Consulte o código abaixo:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}
<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>
Expandir snippet

Akash
fonte
14

Você pode ocultar uma caixa de seleção, mas permitir que ela seja marcada / desmarcada por meio de seu <label>elemento associado .

Com base no fato de a caixa de seleção estar marcada ou não, você pode ocultar / mostrar o texto adicional e até mesmo alterar o texto do rótulo de "Mais" para "Menos".

Incluí alguns detalhes adicionais no CSS para que as intenções de cada definição possam ser um pouco mais claras.

1. Com um botão de alternância "Mais" / "Menos": 

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>
Expandir snippet

2. Com o botão "Mais" na parte superior e o botão "Menos" na parte inferior:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>
Expandir snippet

Tyler Roper
fonte
11

Tecnicamente falando, é possível alternar a visibilidade do texto com base no clique em um botão ou link, conforme mostrado abaixo:

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}
<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>
Expandir snippet

Dito isso, recomendo fortemente que você se familiarize com JavaScript, pois a solução usando JavaScript para algo como isso é muito mais simples e permite flexibilidade adicional.

Adam Chubbuck
fonte
Isso depende do navegador focalizando o link quando você clica nele, o que o padrão não exige (pelo menos da última vez que verifiquei) e nem todos os navegadores fazem (por exemplo, isso não funciona no Safari). Usar: check ou: target provavelmente seria melhor.
chridd de
10

Sim, você pode fazer isso usando apenas HTML e CSS.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}
<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>
Expandir snippet

Monir Alhussini
fonte
4
Olá, monir alhussini, bem-vindo ao Stack Overflow. Posso fazer um comentário sobre como melhorar sua resposta? Seu código funciona muito bem (pelo menos no meu navegador), mas com algum contexto daria uma resposta melhor; por exemplo, você poderia explicar como e por que essa mudança proposta resolveria o problema do questionador, talvez incluindo um link para a documentação relevante. Isso o tornaria mais útil para eles e também mais útil para outros leitores do site que procuram soluções para problemas semelhantes.
Vince Bowdren
3

agora você pode ocultar / mostrar texto usando apenas CSS também! Se você estiver usando a entrada de texto e quiser mostrar / ocultar o texto com base no estado da caixa de entrada, poderá usar a nova pseudoclasse CSS :placeholder-shownpara <input>ou <textarea>. Aqui está um exemplo / demonstração da pseudoclasse mencionada acima !:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}
<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>
Expandir snippet

Aqui está o link para o MDN Docs.

Esta é uma tecnologia experimental Verifique a tabela de compatibilidade do navegador cuidadosamente antes de usá-la na produção.

Hiren
fonte
-1

Talvez alguém ache esta solução mais intuitiva e fácil de implementar. A mecânica disso é que o link tem como alvo a si mesmo e, nesse caso, é fácil selecionar qualquer coisa que venha a seguir no DOM.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}
<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>
Expandir snippet

Mirous
fonte
-3

Usar "display: none;" attribute.

Ajay Munugala
fonte
Olá @Ajay, obrigado pela sua contribuição. No entanto, você parece ter respondido apenas a metade da pergunta: você mostrou como ocultá-lo, mas não como exibi-lo e alternar entre os dois estados com CSS
Charlie Harding
display: bloco; irá mostrá-lo.
Ajay Munugala
E como você usa CSS para lidar com um clique, para alternar entre os estados, como a pergunta está perguntando?
Charlie Harding