Search code examples
htmlcsslayoutrow

Getting the collapsible boxes to be in a row

Is there any way I can get these collapsible boxes to be in a row but still open the full content on the page? They also need to be in three columns. before opening but when opened it should show its full content.

It also has to work in mobile view also. Here is some code to help you out but this would be very useful to know due to using a system that doesn't like Java

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">  
<style type='text/css'>
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.center-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.left {
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
}

.right {
  -webkit-box-align: right;
      -ms-flex-align: right;
          align-items: right;
}

      .container {
        display: flex;
        align-items: center;
        justify-content: left
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 40%
      }
      .text {
        font-size: 20px;
        padding-left: 0px;
      }
      
 /* Create two equal columns that float next to each other */
.column2 {
  float: left;
  width: 50%;
  padding: 1%;
}

 /* Create three equal columns that float next to each other */
.column3 {
  float: left;
  width: 33.33%;
  padding: 1%;
}

 /* Create four equal columns that float next to each other */
.column4 {
  float: left;
  width: 25%;
  padding: 1%;
}

 /* Create five equal columns that float next to each other */
.column5 {
  float: left;
  width: 20%;
  padding: 1%;
}

/* Create six equal columns that float next to each other */
.column6 {
  float: left;
  width: 16.66666%;
  padding: 1%;
}

/* Create seven equal columns that float next to each other */
.column7 {
  float: left;
  width: 16.5%;
  padding: 0.5%;
}

/* Create eight equal columns that float next to each other */
.column8 {
  float: left;
  width: 12.5%;
  padding: 0.5%;
}

/* Create nine equal columns that float next to each other */
.column9 {
  float: left;
  width: 11.1111%;
  padding: 0.5%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}  
 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column3 {
    width: 100%;
  }
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column4 {
    width: 100%;
  }
}

/* Responsive layout - makes the five columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column5 {
    width: 100%;
  }
}
 
/* Responsive layout - makes the six columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column6 {
    width: 100%;
  }
}
 
/* Responsive layout - makes the seven columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column7 {
    width: 100%;
  }
}

/* Responsive layout - makes the eight columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column8 {
    width: 100%;
  }
}

/* Responsive layout - makes the nine columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column9 {
    width: 100%;
  }
}

/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */

.first-column {
    width: 30%;
    padding: 1vw;
    float: left;
}

.second-column {
    width: 70%;
    padding: 1vw;
    float: right;
}

/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */

.first-column1 {
    width: 75%;
    padding: 1vw;
    float: left;
}

.second-column1 {
    width: 25%;
    padding: 1vw;
    float: right;
}

/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */

.first-columnheader {
    width: 55%;
    padding: 1vw;
    float: left;
}

.second-columnheader {
    width: 45%;
    padding: 1vw;
    float: right;
}

/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */

.first-columntext {
    width: 100%;
    padding: 1vw;
    float: left;
}

.second-columntext {
    width: 100%;
    padding: 1vw;
    float: right;
}

/* the next section defines what you want the columns to look like in mobile view - all are linked to the column set ups in the rows above */

@media only screen and (max-width: 768px) {

/* links to row 93 */

   .first-column {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

    .second-column {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }
  
/* links to row 107 */
  
   .first-column1 {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

    .second-column1 {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

/* links to row 137 */
  
   .first-columnheader {
        width: 100%;
        padding-bottom: 2px;
        float: none;
    }

    .second-columnheader {
        width: 100%;
        padding-bottom: 2px;
        float: none;
    }

/* links to row 151 */

   .first-columntext {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

    .second-columntext {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }
 
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
}

 @media (min-width: 140px)
       {       
.style1 
{
 font-size:11px;
}
 .style2
 {
font-size:11.5px;
} 
.style3
{
font-size:12px;
}
.style4
{
font-size:12.5px;
}
.style5
{
font-size:14px;
}
.style6
{
 font-size:16px;
}


           @media (min-width: 768px) 
            {            
                .style1
                {
                    font-size:11px;
                }
                .style2
                {
                    font-size:12px;
                } 
                .style3
                {
                    font-size:14px;
                }
                .style4
                {
                    font-size:18px;
                }
                .style5
                {
                    font-size:24px;
                }
                .style6
                {
                    font-size:32px;
                }
            }


            @media (min-width: 1400px) 
            {            
                .style1
                {
                    font-size:18px;
                }
                .style2
                {
                    font-size:20px;
                }
                .style3
                {
                    font-size:24px;
                }
                .style4
                {
                    font-size:28px;
                }
        .style5
        {
        font-size:32px;
                }
        .style6
        {
            font-size:36px;
                }
}
                
.center-text {
  text-align: center;
}

.bg-rbgreen {
  background-color: #50bc08;
}

.bg-rbpalegreen {
  background-color: #95ea5c;
}

.bg-rbgray {
  background-color: #969696;
}

.bg-rbpalegray {
  background-color: #cacaca;
}

.bg-rbred {
  background-color: #e03a40;
}

.bg-rboffwhite {
  background-color: #f4f4f4;
}

.bg-rbblue {
  background-color: #131f6b;
}

.bg-rbpaleblue {
  background-color: #A4CFEA;
}

.border-dark {
  border: 0.5rem solid #202223;
}

.border-thindarkgray {
  border: 0.1rem solid #867d72;
}

.border-mediumdark {
  border: 0.3rem solid #202223; border-radius: 25px;
}

.border-mediumlight {
  border: 0.3rem solid #ffffff; border-radius: 25px;
}

.border-roundlight {
  border: 0.3rem solid #ffffff; border-radius: 25px;
}

.border-light {
  border: 0.5rem solid #ffffff;
}

.border-thicklight {
  border: 1.3rem solid #ffffff;
}

.border-thinlight {
  border: 0.5rem solid #ffffff;
}

.same-height {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.tab {
  margin-left: 5%; 
}

.space-around {
  margin: 0.5rem;
}

.space-around1 {
  margin: 0rem;
}

.space-around2 {
  margin: 0.5rem 0rem 0rem 0rem;
}

.space-around3 {
  margin: 0.5rem 0rem 0rem 0.5rem;
}

.no-bottom-padding {
  padding-bottom: 0px !important;
}

.text-white {
  color: white;
}

.text-charcoal {
  color: #3b3535;
}

/* img sizing */
img.xsmall {
  width: 10% !important;
}

img.small {
  width: 25% !important;
}

img.medium {
  width: 50% !important;
}

img.large {
  width: 75% !important;
}

img.xlarge {
  width: 100% !important;
}

img.center {
  margin: auto;
}

img.fill {
  height: 100%;
  width: 100%;
}

a {
  text-decoration: none;
}

/* contain a tag within contents*/
a.contain {
  display: contents !important;
}

/* ALLOW ITEMS IN BOX TO STACK */
.stacked {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}

.layout {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

.layout .box {
  /* FLEX BOXES (can apply flex styles like columns) */
  /*display: inline-flex; */
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 100px;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.layout .box > p {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: block;
}

.layout .box > img {
  width: 100%;
  display: block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.layout .box > a {
  width: 100%;
  display: block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.layout .box > a > * {
  width: 100%;
  display: block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.layout .box.p1 {
  padding: 0.5rem;
}

.layout .box.p2 {
  padding: 1rem;
}

.layout .box.p3 {
  padding: 1.5rem;
}

.layout .box.p4 {
  padding: 4rem;
}

.layout .box.p5 {
  padding: 0.2rem;
}

.layout .box.pmxd {
  padding: 0rem 0rem 0rem 2rem;
}

.layout .box.pmxd1 {
  padding: 0rem 0rem 0rem 7rem;
}

.layout .box.pmxd2 {
  padding: 0rem 0rem 0rem 1rem;
}

.layout.two {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row;
          flex-flow: row;
}

.layout.two.split_25_75 > .box, .layout.two.split_2575 > .box, .layout.two.split2575 > .box {
  width: 25%;
}

.layout.two.split_25_75 > .box:nth-child(2n), .layout.two.split_2575 > .box:nth-child(2n), .layout.two.split2575 > .box:nth-child(2n) {
  width: 75%;
}

.layout.two.split_80_20 > .box, .layout.two.split_8020 > .box, .layout.two.split8020 > .box {
  width: 80%;
}

.layout.two.split_80_20 > .box:nth-child(2n), .layout.two.split_8020 > .box:nth-child(2n), .layout.two.split8020 > .box:nth-child(2n) {
  width: 20%;
}

.layout.two.split_60_40 > .box, .layout.two.split_6040 > .box, .layout.two.split6040 > .box {
  width: 60%;
}

.layout.two.split_60_40 > .box:nth-child(2n), .layout.two.split_6040 > .box:nth-child(2n), .layout.two.split6040 > .box:nth-child(2n) {
  width: 40%;
}

.layout.two > .box {
  width: 50%;
}

.layout.three > .box {
  width: 33.333%;
}

.layout.four > .box {
  width: 25%;
}

.layout.three.split_25_50_25 > .box, .layout.three.split25_50_25 > .box, .layout.three.split_255025 > .box, .layout.three.split255025 > .box {
  width: 25%;
}

.layout.three.split_25_50_25 > .box:nth-child(2n), .layout.three.split25_50_25 > .box:nth-child(2n), .layout.three.split_255025 > .box:nth-child(2n), .layout.three.split255025 > .box:nth-child(2n) {
  width: 50%;
}

.bottomRight {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 50% !important;
}

/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

/*
 Styling
*/

.accordion {
  margin-bottom: 1em;
  height: auto;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  padding: 15px;
  border-top: 0;
}

.accordion .handle {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;
}

.accordion label {
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 15px;
  background: #14b1e8;
  margin: 0em 65.5em 0em 1.5em;
}

.accordion label:hover,
.accordion label:focus {
  background: #50bc08;
  color: #fff;
}

.accordion .handle label:before {
  content: "+";
  display: inline-block;
  margin-right: 10px;
  font-size: .58em;
  line-height: 1.556em;
  vertical-align: middle;
}

.accordion > input[type="checkbox"]:checked ~ .handle label:before {
  content: "-";
}

/*
 CSS for the main interaction
*/
.accordion1 > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion1 .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion1 > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion1 label {
  display: block;
}

/*
 Styling
*/

.accordion1 {
  margin-bottom: 1em;
  height: auto;
}

.accordion1 > input[type="checkbox"]:checked ~ .content {
  padding: 15px;
  border-top: 0;
}

.accordion1 .handle {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;
}

.accordion1 label {
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 15px;
  background: #14b1e8;
  margin: 0em 65.5em 0em 1.5em;
}

.accordion1 label:hover,
.accordion1 label:focus {
  background: #50bc08;
  color: #fff;
}

.accordion1 .handle label:before {
  content: "+";
  display: inline-block;
  margin-right: 10px;
  font-size: .58em;
  line-height: 1.556em;
  vertical-align: middle;
}

.accordion1 > input[type="checkbox"]:checked ~ .handle label:before {
  content: "-";
}

/*
 CSS for the main interaction
*/
.accordion2 > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion2 .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion2 > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion2 label {
  display: block;
}

/*
 Styling
*/

.accordion2 {
  margin-bottom: 1em;
  height: auto;
}

.accordion2 > input[type="checkbox"]:checked ~ .content {
  padding: 15px;
  border-top: 0;
}

.accordion2 .handle {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;
}

.accordion2 label {
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 15px;
  background: #14b1e8;
  margin: 0em 65.5em 0em 1.5em;
}

.accordion2 label:hover,
.accordion2 label:focus {
  background: #50bc08;
  color: #fff;
}

.accordion2 .handle label:before {
  content: "+";
  display: inline-block;
  margin-right: 10px;
  font-size: .58em;
  line-height: 1.556em;
  vertical-align: middle;
}

.accordion2 > input[type="checkbox"]:checked ~ .handle label:before {
  content: "-";
}

html {
height: 1800px;

}

@media (max-width: 800px) {
html {
height: 3200px;

}
}


/*# sourceMappingURL=base.css.map */
</style>
</head>
<body>
<div class="page" style="font-family: 'lato',helvetica;">
<div class="layout one">
<div class="border-thinlight style1" style="color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<section class="accordion">
  <input type="checkbox" name="collapse" id="handle1">
  <h2 class="handle">
    <label for="handle1">Headers</label>
  </h2>
  <div class="content">
  <div class="layout one">
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #002060; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="style1" style="color: #ff0000;"><strong>Header</strong></span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.​</div>
 
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="accordion1">
  <input type="checkbox" name="collapse2" id="handle2">
  <h2 class="handle">
    <label for="handle2">Header</label>
  </h2>
  <div class="content">
  <div class="layout one">
<div class="first-column" style="min-height: 20vw; height: 100%; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 20vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  </div>
</section>
<section class="accordion2">
  <input type="checkbox" name="collapse3" id="handle3">
  <h2 class="handle">
    <label for="handle3">Header</label>
  </h2>
  <div class="content">
  <div class="layout one">
<div class="first-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
<span style="color: #ff0000;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
  </div>
  </div>
</section>
</div>
</body>
</html>

Solution 

  • .accordion1 .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  border-radius: 6px;
  left: 0;

    I have found the answer it took a while but separate each column, then add left:0 then all the content goes to the left, but now got another problem, the content once selected is showing over one another. Just trying to find out how to stop it, I have tried removing the Z-index but it still does it. If there is any resolve for this would be greatly helpful