Search code examples
laraveltwitter-bootstrapforeachresponsive-design

Responsive layout with collapsible components

I'm developing a website using laravel framework along with bootstrap and i need to do responsive layout with collapsible components! I need some help :)

Large screen size:

Click on first picture:

enter image description here Click on second picture:

enter image description here

Small screen size:

Click on first picture:

enter image description here

Click on second picture:

enter image description here

At this moment i have this problem with large screen size:

enter image description here

Code: bootply

<section class="container full-width">
    <div class="row" id="accordion">
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
    </div>
</section>

Ok! How can I stretch the collapsible component? How works the bootstrap collapse for to close the others collapses when i click on other?

I hope I have been able to explain my problem :)

Thanks for your attention!

Edit:

enter image description here

Solved:

bootply

This layout on foreach (3 items per row)

<section class="container-fluid no-padding">
     <div class="row no-padding">
          <div id="accordion-lg">
               <div class="hidden-xs panel">
                    @foreach (array_chunk($collection, 3) as $row)
                         @foreach ($row as $item)
                         <a class="col-lg-4 no-padding" data-toggle="collapse" href="{{ '#collapse-lg'.$item->id }}" data-parent="#accordion-lg">
                              Collapse Toogle
                         </a>
                         @endforeach
                         @foreach ($row as $item)
                         <div id="{{ 'collapse-lg'.$item->id }}" class="collapse">
                              Collapse
                         </div>
                         @endforeach
                    @endforeach
               </div>
          </div>
          <div id="accordion-xs">
               <div class="hidden-lg panel">
               @foreach ($category->trips as $item)
                    <a class="col-xs-12 no-padding" data-toggle="collapse" href="{{ '#collapse-xs'.$item->id }}" data-parent="#accordion-xs">
                        Collapse Toogle
                    </a>
                    <div id="{{ 'collapse-xs'.$item->id }}" class="collapse">
                        Collapse
                    </div>
               @endforeach
               </div>
          </div>  
     </div>
</section>

Thaks for help to solve this problem!

Solution

  • So, unfortunately, the behavior you want at these breakpoints is not possible without duplicating content. In essence, you will have two accordions, one which shows on lg and one for xs.

    There are downsides to duplicating content (such as increased load times, higher maintenance, increased time to make changes, etc) but if you find them acceptable, I have the solution below.

    I went ahead and refactored your code (while trying to maintain most of the things you were doing - such as no padding) and removed a lot of extra bootstrap classes which were not necessary. The two accordions are now completely split apart; the lg one comes first, then the xs one.

    The code is available here: http://www.bootply.com/8sga1R1l0F

    I also noticed another problem in the original code you supplied. When you would click on an element in the accordion, it would not hide any other element that was showing. This is due to the 'bug' discussed here: Bootstrap 3 Accordion button toggle "data-parent" not working

    Let me know if you have any questions.

    For completeness, the full code is below:

    HTML

    <section class="container-fluid no-padding">
    <div class="row no-padding">
        <div class="hidden-xs">
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            </div>
            <div id="collapseBottom" class="hidden-xs collapse in">
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding cyan">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
            </div>
        </div>
        <div id="xsAccordion">
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseOne" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseOne" class="collapse in">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseTwo" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseTwo" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseThree" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseThree" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
       </div>
   </div>
</section>

    CSS

    .no-padding {
    margin: 0 !important;
    padding: 0 !important;
}

.cyan { 
    color: #00b1ba;
}