JSFiddle - React, Tailwind, and code Playground

by stedman

HTML

<body class="no-js">
    <div role="main">
        <h1>CSS3 Show-Hide with Transition</h1>
        <p>Lorem ipsum 1.</p>
        <div class="reveal">
            <a href="#countriesList" class="trigger">Countries</a>
            <div id="countriesList" class="target">
                <ul>
                    <li>U.S.A.</li>
                    <li>Canada</li>
                    <li>Mexico</li>
                </ul>
            </div>
        </div>
        <p>Lorem ipsum 2.</p>
    </div>
</body>

CSS

.js .target {
	/* delay the visibility change until after the max-height has transitioned */
	-webkit-transition: max-height .5s ease, visibility 0s linear .5s;
	   -moz-transition: max-height .5s ease, visibility 0s linear .5s;
	     -o-transition: max-height .5s ease, visibility 0s linear .5s;
	        transition: max-height .5s ease, visibility 0s linear .5s;
	max-height: 0;
	overflow: hidden;
    visibility: hidden;
}
.show .target {
	-webkit-transition: max-height 1s ease;
	   -moz-transition: max-height 1s ease;
	     -o-transition: max-height 1s ease;
	        transition: max-height 1s ease;
	max-height: 5em;
    visibility: visible;
}

JavaScript

(function(){
	$("body")
    	// simulate modernizr
        .toggleClass("no-js js")
    
        .find(".trigger")
            // add ARIA
            .attr("role", "button")
            .attr("aria-controls", "myDetails")
            .attr("aria-expanded", "false")
            .end()
	
        .find(".target")
            .attr("aria-hidden", "true")
            .end()
    
	    // add event handler and functionality
	    .on("click", ".trigger", function(ev) {
            ev.preventDefault();
            
            $(this)
                // toggle ARIA state      
                .attr("aria-expanded", function(idx, val) {
                    return (val === "true") ? "false" : "true";
                })
            
                .parents(".reveal")
                    // toggle hide/show class
                    .toggleClass("show")
                    .end()
            
                .siblings(".target")
                    // toggle ARIA hidden
                    .attr("aria-hidden", function(idx, val) {
                        return (val === "true") ? "false" : "true";
                    })
                    ;
        })
        ;
}());