How to Collapse and Expand a text using HTML5 only?

Asked

Viewed 3,822 times

1

I wrote the following code I saw in a Bootstrap video tutorial but it’s not working:

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <h4><a href="#col3Content" data-toggle="collapse">Column3</a></h4>

  <div id="col3Content" class="collapse">Bacon ipsum dolor amet pancetta  fatback ground round, bresaola strip steak boudin filet mignon turkey kevin drumstick sirloin swine pork belly. Corned beef shankle ham hock drumstick capicola short loin ball tip tri-tip kevin turkey chuck pork belly venison bacon. Fatback turkey swine tongue, chuck jerky doner pork belly pork corned beef rump leberkas. Ham hock fatback bresaola tri-tip salami.</div>

</div>
html5 collapse
  • 2

    You know Bootstrap has the right Javascript?

  • Yes but in the video it is possible to make Text Ripper and expand with only these code

  • I think I already answered one that does this, show the expanded text by clicking (the solution is checkbox if it is one item, and radiobutton if there are several, but to show one at a time). While I can’t find the link, there is another variant: http://answall.com/questions/99108/como-clicar-e-descer-uma-parte-oculta

1 answer

3

I don’t see how this can be done without Javascript. The closest is to using the :active but that only works the moment the mouse is pressed:

.collapse {
	height: 0px;
	overflow: hidden;
	transition: height 0.8s;
}

h4:active + .collapse {
	height: 200px;
}
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <h4><a href="#col3Content" data-toggle="collapse">Faz um clique longo...</a></h4>

  <div id="col3Content" class="collapse">Bacon ipsum dolor amet pancetta  fatback ground round, bresaola strip steak boudin filet mignon turkey kevin drumstick sirloin swine pork belly. Corned beef shankle ham hock drumstick capicola short loin ball tip tri-tip kevin turkey chuck pork belly venison bacon. Fatback turkey swine tongue, chuck jerky doner pork belly pork corned beef rump leberkas. Ham hock fatback bresaola tri-tip salami.</div>

</div>

To do this without Javascript you can use the trick of checkbox, which basically uses the logic of adjacent sibling in the CSS I mentioned above but using the state of the checkbox as a switch:

label input[type="checkbox"] {
    display: none;
}

label h4 {
	cursor: pointer;
	text-decoration: underline;
}

.collapse {
    height: 0px;
    overflow: hidden;
    transition: height 0.8s;
}

input:checked + .collapse {
    height: 200px;
}
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <label>
        <h4>Clica aqui</h4>
        <input type="checkbox" />
        <div id="col3Content" class="collapse">Bacon ipsum dolor amet pancetta fatback ground round, bresaola strip steak boudin filet mignon turkey kevin drumstick sirloin swine pork belly. Corned beef shankle ham hock drumstick capicola short loin ball tip tri-tip kevin turkey chuck pork
            belly venison bacon. Fatback turkey swine tongue, chuck jerky doner pork belly pork corned beef rump leberkas. Ham hock fatback bresaola tri-tip salami.</div>
    </label>
</div>

There is also a new HTML5 technology that does this, without Javascript and without CSS, using the elements <details> and <summary>:

<details>
  <summary>Clica aqui...</summary>

  <div id="col3Content" class="collapse">Bacon ipsum dolor amet pancetta fatback ground round, bresaola strip steak boudin filet mignon turkey kevin drumstick sirloin swine pork belly. Corned beef shankle ham hock drumstick capicola short loin ball tip tri-tip kevin turkey chuck pork belly
    venison bacon. Fatback turkey swine tongue, chuck jerky doner pork belly pork corned beef rump leberkas. Ham hock fatback bresaola tri-tip salami.</div>

</details>

Browser other questions tagged html5 collapse

You are not signed in. Login or sign up in order to post.