JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<!--[if lt IE 9]>
UPDATE YOUR BROWSER<br />
<html class="no-js lt-ie9"> <![endif]-->
<![endif]-->
<div class="accordion">
    <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">STRATEGY</a>
        <div id="accordion-1" class="object_blurb_bounds">
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you add text... here.
            </div>
            <div class="object_blurb">
                <div class="object_blurb_img">
                    <img src="http://placehold.it/100x100">
                </div>text goes here so put the text here when you...

CSS

.lt-ie9 body {
    .object_blurb {
        width:100%;
    }
    .object_blurb_bounds {
        display:visible;
    }
}
@media screen and (min-width:800px) {
    .object_blurb {
        width:25%;
    }
    a.accordion-section-title::before {
        content:"III";
        padding: 0 5px 0 5px;
        float: left;
        transform: rotate(-90deg);
        transition: .1s;
        text-shadow: 1px 1px 1px #223B59;
        font-family: sans-serif;
        color:white;
    }
    a.accordion-section-title.active::before {
        color: white;
        color: #3667A4;
        text-shadow: 1px 0px 2px #000;
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    .object_blurb {
        width:33.33%;
    }
    a.accordion-section-title::before {
        content:"III";
        padding: 0 5px 0 5px;
        float: left;
        transform: rotate(-90deg);
        transition: .1s;
        text-shadow: 1px 1px 1px #223B59;
        font-family: sans-serif;
        color:white;
    }
    a.accordion-section-title.active::before {
        color: white;
        color: #3667A4;
        text-shadow: 1px 0px 2px #000;
    }
}
@media screen and (min-width: 360px) and (max-width: 599px) {
    .object_blurb {
        width:50%;
    }
    a.accordion-section-title::before {
        content:"III";
        padding: 0 5px 0 5px;
        float: left;
        transform: rotate(-90deg);
        transition: .1s;
        text-shadow: 1px 1px 1px #223B59;
        font-family: sans-serif;
        color:white;
    }
    a.accordion-section-title.active::before {
        color: white;
        color: #3667A4;
        text-shadow: 1px 0px 2px #000;
    }
}
@media screen and (max-width: 359px) {
    .object_blurb {
        width:100%;
    }
}
.accordion-section {
    background: #223b59;
    color: white;
    text-align: center;
    font-size: x-large;
    font-family:"Trebuchet MS", "sans-serif";
}
.object_blurb {
    float:left;
    background:white;
    min-height: 110px;
   ...

JavaScript

$(document).ready(function () {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.object_blurb_bounds').slideUp(150).removeClass('open');
    }

    $('.accordion-section-title').click(function (e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if ($(this).hasClass('active')) {
            close_accordion_section();
        } else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(150).addClass('open');
        }

        e.preventDefault();
    });
});