Showing posts with label accordion. Show all posts
Showing posts with label accordion. Show all posts

Thursday 26 April 2018

CSS Grid Layout accordion

This example highlights an important difference required by CSS Grid Layout to function properly. I've put it in red to make it obvious. If this line used the auto width setting, then as the accordion-content items expanded, they would mess up the layout. By using fractions (fr), we force the columns to retain their widths.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS Grid Layout accordion</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #container {
      max-width: 46em;
      margin: 0 auto;
    }

    .grid {
      display: grid;
    }

    .two-columns {
      grid-template-columns: 1fr 1fr;
    }

    .accordion-link {
      width: 100%;
      display: block;
    }

    .accordion-content {
      overflow: hidden;
      display: none;
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: auto;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="grid two-columns">
      <div id="column1">
        <a href="#" class="accordion-link">Link 1</a>
        <div class="accordion-content">
          Possumus noster ex excepteur firmissimum, voluptate dolore quid non quem e constias in illum doctrina, quid praetermissum offendit eram voluptate.
        </div>

        <a href="#" class="accordion-link">Link 2</a>
        <div class="accordion-content">
          Quibusdam sunt aliqua commodo culpa, quo ne illum culpa minim, noster commodo officia, id te culpa aliquip.
        </div>
      </div>

      <div id="column2">
        <a href="#" class="accordion-link">Link 3</a>
        <div class="accordion-content">
          Ad ipsum eiusmod. Consequat non legam excepteur, ut duis constias. Sint quibusdam ne anim enim.
        </div>

        <a href="#" class="accordion-link">Link 4</a>
        <div class="accordion-content">
          Se appellat an laboris nam nostrud ad eram nescius.Ubi aliqua officia quo eiusmod malis admodum occaecat ne te ingeniis transferrem, quo minim esse qui quibusdam, sed incurreret praetermissum, commodo te senserit ea aute imitarentur laboris quis officia,
          litteris sint expetendis.
        </div>
      </div>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName('accordion-link');

    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var accordioncontent = this.nextElementSibling;
        if (accordioncontent.style.display === 'block') {
          accordioncontent.style.display = 'none';
        } else {
          accordioncontent.style.display = 'block';
        }
      });
    }
  </script>
</body>

</html>

Friday 25 April 2014

jQuery accordion plugin you can style how you like

The jQuery accordion plugins I have come across also come with some complex CSS. They rely on the CSS to hide elements and you have to dig your way through complex CSS elements in order to adapt the look for your own purposes. On of the the worst culprits for this is the one which comes with the jQuery UI library.
So I devised my own plugin which operates without any CSS, is easy to style, is lightweight, does not require anchors to open items, and provides flexibility to the item headers.
First the HTML.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accordion</title>  
    <style>
    body
    {
      font: 90%/1.618 sans-serif;
      padding-top:2em;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="micksaccordion">
      <section>
        <header>
          <h1>Header 1</h1>
        </header>
        <article>
          <p>This is from article 1</p>
        </article>
      </section>
      <section>
        <header>
          <h2>Header 2</h2>
        </header>
        <article>
          <p>This is from article 2</p>
        </article>
      </section>
      <section>
        <header>
          <h3>Header 3</h3>
        </header>
        <article>
          <p>This is from article 3</p>
        </article>
      </section>
      <section>
        <header>
          <h4>Header 4</h4>
        </header>
        <article>
          <p>This is from article 4</p>
        </article>
      </section>
    </div><!-- micksaccordion -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="accordion.plugin.js"></script>
    <script>
    (function()
    {
      /* Easy version
      $('#micksaccordion').accordion();
      */
      $('#micksaccordion').accordion(
      {
        /* 'first', 'last', false */
        show:'last'
      });
    })();
    </script>
  </body>
</html>

And now the jQuery plugin:
(function($)
{
  $.fn.extend(
  {
    accordion:function(options)
    {
      var defaults =
      {
          show:false
      }

      var options = $.extend(defaults, options);

      return this.each(function()
      {
        var o = options;              

        var articles = $(this).find('article');

        var firstSection = $(this).children().first();      
        var firstArticle = firstSection.find('article');

        var lastSection = $(this).children().last();      
        var lastArticle = lastSection.find('article');

        articles.hide();

        if(o.show == 'first')
        {
          firstArticle.show();
        }
       
        if(o.show == 'last')
        {
          lastArticle.show();
        }

        var sections = $(this).find('section');

        $(sections).on('click','header', function()
        {
          thesection = $(this).parent();
          thearticle = thesection.find('article');        
          if (thearticle.css('paddingTop') == '0px') thearticle.css({paddingTop: '1px'});
          if (thearticle.css('paddingBottom') == '0px') thearticle.css({paddingBottom: '1px'});        
          thearticle.slideToggle('slow');
        });

      });
    }
  });
})(jQuery);

Enjoy!