cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              

  
<section ng-app="docsSimpleDirective" class="container-fluid">

  <header class=" text-center">
  
    <h1>Sidebar turning into an accordion</h1>
    <h2>Breakpoint: min-width:992px</h2>
  </header>


    <div class="row">
      <section class="sidebar col-md-4">
        <!-- [main accordion] -->
        <!-- This is the one that is only active within a specific viewport -->
        <div class="panel-group" id="accordion-1" role="tablist" accordion-breakpoint aria-multiselectable="true">
          <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne-1">
        <h4 class="panel-title">
          <a id="btn-collapse" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne-1">
            Accordion Handle (click to display content)
          </a>
        </h4>
      </div>
      <div id="collapseOne-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <h3>Sidebar</h3>

          <!-- [Secondary accordion] -->
          <!-- This  -->
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Option #1
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Option #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Option #3
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
          <!-- [Secondary accordion] -->

        </div>
      </div>
    </div>
        </div>
        <!-- [main accordion] -->
      </section><!-- sidebar -->
      
      <main class="col-md-8">
        <p class="txt-placeholder">Bear claw caramels cheesecake oat cake sugar plum chocolate cake danish. Apple pie jelly icing cake jujubes topping. Brownie chocolate cake tiramisu donut. Gummies tootsie roll dessert lemon drops pastry. Icing soufflé chocolate cake fruitcake carrot cake brownie. Carrot cake ice cream cake tootsie roll gummies tootsie roll jelly-o cheesecake dragée. Tiramisu sweet roll macaroon candy ice cream sweet gummi bears marshmallow jelly beans. Gingerbread tootsie roll oat cake. Jujubes marzipan marzipan lollipop. Dessert dragée carrot cake. Marshmallow chocolate cake gummi bears apple pie apple pie chocolate cake tart cupcake brownie. Dessert jelly icing gummi bears jujubes tootsie roll caramels.</p>
        <p>Toffee cotton candy powder cheesecake marshmallow dragée. Liquorice bear claw powder jujubes fruitcake. Cookie cupcake ice cream icing. Gummies gummies sweet roll tootsie roll jelly-o halvah tiramisu cake cake. Wafer danish jelly-o dragée halvah candy canes dragée. Donut liquorice marshmallow jelly beans. Ice cream dessert pastry soufflé cake candy candy canes wafer. Caramels carrot cake sweet roll bonbon macaroon cake jujubes. Bear claw muffin cupcake jelly-o tart toffee biscuit caramels. Cotton candy croissant cake bear claw. Chocolate tiramisu tiramisu candy carrot cake. Tart chocolate cake powder chupa chups marzipan jujubes toffee gingerbread oat cake.</p>
        <p>Chocolate bar bonbon icing marshmallow croissant candy soufflé carrot cake. Icing ice cream candy cake donut. Dessert soufflé jelly-o carrot cake cotton candy cheesecake muffin sesame snaps cake. Pie caramels sweet roll carrot cake marzipan soufflé. Toffee jujubes marshmallow gummies jujubes sugar plum cookie. Muffin powder liquorice jelly-o candy canes pudding lemon drops croissant. Dessert candy canes croissant apple pie gummies chocolate. Dessert wafer pie sweet roll candy canes marzipan. Wafer croissant liquorice brownie gingerbread dragée jelly. Ice cream gingerbread sweet roll. Pudding lemon drops croissant oat cake donut. Candy jelly jelly beans. Candy dessert cheesecake sugar plum toffee donut dessert.</p>
        <p>Bonbon cake jelly chocolate bear claw cotton candy bonbon cake. Biscuit bear claw biscuit jelly beans tart pie gummi bears. Gingerbread icing jujubes chocolate bar chocolate bar sweet roll wafer soufflé toffee. Powder tart liquorice cookie dessert macaroon. Pudding tiramisu candy candy dessert. Pie marshmallow brownie sweet roll bear claw macaroon biscuit. Jelly-o ice cream powder apple pie soufflé chocolate cake. Tootsie roll cupcake sesame snaps toffee. Jelly-o fruitcake marzipan marshmallow dessert fruitcake danish powder. Sweet powder biscuit liquorice cake pudding biscuit fruitcake. Marzipan sugar plum caramels. Icing marshmallow cake croissant tart carrot cake. Muffin macaroon chupa chups jelly cake cheesecake chocolate cake sweet roll cotton candy.</p>
        <p>Wafer biscuit sesame snaps tiramisu jelly beans jelly-o caramels marzipan. Topping pudding soufflé cheesecake cheesecake dragée jelly-o. Toffee dragée candy canes apple pie gingerbread toffee icing halvah jelly. Cookie chupa chups sesame snaps wafer pie cotton candy icing. Candy dragée danish chocolate lollipop bonbon biscuit. Cupcake gummies cheesecake toffee gummies lemon drops caramels marzipan pastry. Toffee pie liquorice. Candy canes carrot cake jelly powder bear claw. Lemon drops bonbon danish. Sweet apple pie sweet roll marshmallow gummies cake sugar plum carrot cake ice cream. Caramels donut marzipan pudding dessert candy macaroon gingerbread. Donut jujubes wafer liquorice marzipan toffee.</p>
        <p>Sugar plum jelly gummies. Tiramisu pastry marshmallow jelly-o. Toffee icing pudding soufflé gingerbread sweet roll bear claw. Marshmallow chupa chups oat cake chocolate candy danish bonbon. Bear claw croissant cookie. Halvah pie brownie sesame snaps cupcake candy canes sesame snaps tootsie roll sweet roll. Jelly-o soufflé macaroon bonbon. Sesame snaps sweet roll jelly beans bear claw jelly beans sugar plum. Biscuit chocolate cake chupa chups lemon drops brownie liquorice. Soufflé fruitcake chocolate bar gingerbread. Gummies lemon drops cupcake brownie. Gummies bear claw danish soufflé gingerbread. Gingerbread tootsie roll candy canes gummies. Sesame snaps donut marzipan halvah bear claw gummies oat cake apple pie cookie.</p>
        <p>Croissant lollipop chocolate cake. Lollipop pie croissant carrot cake chocolate. Sugar plum candy canes dragée cupcake gummi bears powder bear claw jelly beans. Sweet sesame snaps wafer marzipan. Cupcake macaroon jelly pie topping. Pudding lemon drops jelly-o. Candy canes chocolate bar chupa chups muffin. Caramels bear claw pudding tootsie roll. Gummi bears oat cake candy canes topping tart sesame snaps brownie powder brownie. Topping sweet jujubes chocolate tart danish. Gummies oat cake pudding sugar plum toffee topping cake sesame snaps danish. Sweet roll lollipop jujubes macaroon. Jujubes apple pie cheesecake halvah icing.</p>
      </main><!-- main -->
    </div><!-- row -->
</section><!-- the app -->


<br /><br /><br /><br />
            
          
!
            
              //...
.hidden{
  display: none;
}
.sidebar {
  .panel{
    background-color: turquoise;
  }
  .panel-heading{
    background: #333;
    color: #ccc;
    a{
      display: block;
    }
  }
  .panel-default{
    border-color: #333; 
  }
}

@media (max-width: 991px){
  h1, h2{
    font-size: 1em;
    margin: 0;
  }
  
  header{
    margin: 30px 0;
  }
}
            
          
!
            
              


angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}])
 
/**
 * Angular directive. (Eric Njanga / Jan 2017)
 * Restricts accordion operations only on a "specific breakpoint". 
 * Past that breakpoint, the accordion simply stops operating and leaves
 * its content opened.
 * > How accordion is deactivateed : 
 * >> Handle containing the collapse button is hidden, so user won't have anything to click on
 * Note: uses JavaScript :"matchMedia"
*/
.directive('accordionBreakpoint', ['$timeout', function ($timeout) {

  function link(scope, element, attrs) {
    var breakpoint = '(min-width: 992px)',
        cssClassHide = 'hidden';

    /*
     * Make accordion inoperable/operable
     * (show or hide handle depending on boolean value)
    */
    function deactivate_or_activate_accordion(bool) {
        var element__handle = jQuery('#headingOne-1');
        if(bool==true) { 
            element__handle.addClass(cssClassHide);
        } else { 
            element__handle.removeClass(cssClassHide);  
        }
    }


    /*
     * Manually expand accordion (only if first collapsed)
    */
    function expand_accordion() {
        var btnCollapse             = jQuery('#btn-collapse'), 
            element__panel_collapse = jQuery('#collapseOne-1'); 
        if( !element__panel_collapse.hasClass('in') ){ 
            btnCollapse.trigger('click');
        }
    }

    // Manually collapse accordion (only if first expanded)
    function collapse_accordion() {
        var btnCollapse = jQuery('#btn-collapse'),
            element__panel_collapse = jQuery('#collapseOne-1'); 
        if( element__panel_collapse.hasClass('in') ){ 
            btnCollapse.trigger('click');
        }
    }

    // Act when viewport's width changes below or above the breakpoint
    // -> Deactivate accordion if the breakpoint is matched
    // -> Always toggle accordion 
    function handle_breakpoint_match(mq) {
      //Deactivate or activate accordion depending on 'mq.matches' value (true/false)
      deactivate_or_activate_accordion(mq.matches); 
      //...
      if (mq.matches) {
          expand_accordion();
      } else {
          collapse_accordion();
      }
    }

    // Start by checking media query match, then setup
    //an even handler that will constantly do the watch
    $timeout(function () { 
        if (matchMedia) {
            var mq = window.matchMedia(breakpoint);
            mq.addListener(handle_breakpoint_match);
            handle_breakpoint_match(mq);
        }
    }, 0);
  }//[end] link

  return {
    link: link
  };
}]);



            
          
!
999px
Loading ..................

Console