JSFiddle - React, Tailwind, and code Playground

show and hide use case

by Jennifer Perrin

HTML

<div role="banner">    
  <h1>My Diary Entries</h1>
  </div>
    <div class='entries' role='main'>
      <div class="article">
        <h2>Wrote my first mobile application</h2>
        <p>
          Today I wrote my first mobile application. It was great! I had huge amounts of fun, it was
          a lot easier than I expected, and I was so happy I spent the rest of the day celebrating.
        </p>
      </div>
      <div class="article">
        <h2>Wrote another mobile application</h2>
        <p>
          I am on such a roll with these mobile Web applications that I went crazy and wrote a second
          one. I am so happy I cannot stop singing at the top of my lungs. My cat seems worried that
          I've finally lost it completely, but I don't care — it's mobile Web all the way from now on!
        </p>
      </div>
      <div class="article">
        <h2>Must stop writing mobile applications</h2>
        <p>
          My fingers are sore from writing so many great mobile Web applications. I know that I should
          stop and take a break, but there are so many great things to do with this technology that I
          really don't know how to stop!</p>
      </div>
    </div>

CSS

body {
                    font-size: 110%;
                    line-height: 1.4;
                    font-family:Arial, Helvetica, sans-serif;
                    color:#333;
                    background: #fff;
                    margin:0;
                }
                
                a{
                        text-decoration: none; 
                        color:#006783;
                }
                
                        
                a:focus{outline:thin dotted}
                a:active,a:hover{outline:0}

                
                a:focus,
                a:active{
                        color:#093A6B;
                        background-color:#FFBF47;
                }
                
                div[role="banner"]{
                        background: #a90329;
                        background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
                        background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
                        background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
                        background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
                        background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%);
                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
                        color: #fff;
                        padding:1em 0;
                }
                
                .article{
                        background: #ffffff;
                        background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),...

JavaScript

$(document).ready(function() {

    /* JS USE CASE */
    $('html').addClass('js');

    /* H2 functions */
    $('h2').wrapInner("<a href='#'></a>"); /* Make keyboard focusable */
    $('h2').addClass('show'); /* Add class with js */

    /* Paragraph functions  */
    $('p').addClass('not-read'); /* Add class with js */
    $('p').attr('aria-hidden', 'true'); /* Write in aria state with js */

    /* aria-hidden state switcher */
    (function(toggleAriaHidden) {
        toggleAriaHidden.fn.ariaHiddenSwitcher = function() {
            return this.each(function() {
                // Toggle aria-hidden
                if ($(this).attr('aria-hidden') === 'true') {
                    $(this).attr('aria-hidden', 'false');
                }
                else {
                    $(this).attr('aria-hidden', 'true');
                }
            });
        };

    })(jQuery);

    /*Run functions */
    $(function() {
        $('.js .entries h2').click(function() {
            // h2 effects
            $(this).toggleClass('show'); // toggle the class
            // paragraph effects
            $(this).next('p').ariaHiddenSwitcher(); // toggle aria-hidden state
            $(this).next('p').toggleClass('not-read'); // toggle the class
        });
    });


})