How do I collapse and expand a text using HTML5 only? [closed]

Question

How do I collapse and expand a text using HTML5 only? [closed]

Navigation

#1 by (1 votes)

1

I wrote the following code I saw in a Bootstrap tutorial video but it is 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

asked by anonymous 04.02.2017 / 19:13

1 answer

Colored Text CSS javaFX Uploading images with c # windows forms and php

score 1 · Answer 1

I'm not seeing how this can be done without JavaScript. The closest is to use :active but it only works when 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 checkbox trick, which basically uses the adjacent sibling logic in the CSS I mentioned above but using the status of 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's even new technology in HTML5 that does this, without JavaScript or 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>