Bollate

HTML

[ANSWERED] html – CSS only show/hide content with flexbox

By

Nov 20, 2022 , ,

Solution 1 :

You may need :

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

.open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }
<div style="display: flex; justify-content: space-between;align-items:flex-start; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>

CSS column might also be what you need here :

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

.open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }
<div style="column-count:2; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>

Problem :

I am creating a FAQ list with 8 questions. I got the CSS checkbox technique working to show and hide the answer after clicking the question.

My only problem is I use flexbox for the grid layout and when it shows the answer to question 1, on the left, it also expands the box to the right. Image collapsed:
enter image description here
Image expanded:
enter image description here

So the problem also is that it slides all questions on the right to the bottom, however, I want to keep those the same if they are not expanded. So it should look like this:

enter image description here

The code snippet:

 .open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }
 <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>

I don’t want a JS solution, it would have been much easier. Unfortunately on this page we can’t use JS. Hoping someone knows how to fix this.

Comments

Comment posted by minimal reproducible example

Can you provide a

Comment posted by G-Cyrillus

I guess you need something alike :

Comment posted by Sybrentjuh

I’m so stupid, I read about this, but I used align-items on the two child columns instead of the main container, bleh. This works great, thanks!

By

Related Post

HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022
HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

Leave a Reply

Your email address will not be published. Required fields are marked *

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022