JSFiddle - React, Tailwind, and code Playground

accordion idea

by Jennifer Perrin

HTML

<dl class="accordion">
<dt><a>Drama, Music and Screen <span>more details »</span></a></dt>

    <dd style="display: none;" class="">
        <p>
            <img alt="Sarah Jane Dickenson" title="Sarah Jane Dickenson" src="http://www2.hull.ac.uk/fass/images/2013627.00-18.009.0030.00-drama_helen_v_150sq.jpg" class="">The School of Drama, Music and Screen&nbsp;at the University of Hull is committed to providing a student experience which is second to none, students have the opportunity to develop both practical skills and intellectual understanding to a very high level. Our graduates often go on to become highly-regarded professionals in the cultural industries, in education and in related professions.
            <br>
        </p>
        <p>
            <br>
<a class="button" href="/fass/drama-1.aspx">Drama Website</a>&nbsp; &nbsp;<a class="button" href="/fass/music-1.aspx">Music Website</a>&nbsp; &nbsp;<a class="button" href="http://www2.hull.ac.uk/fass/film-studies.aspx">Film
Studies</a>
        </p>
    </dd>
<dt><a>English<span>more details »</span></a></dt>

    <dd style="display: block;" class="active">
        <p>
            <img alt="Module information" title="Module information" src="http://www2.hull.ac.uk/fass/images/2013627.00-18.009.0030.00-module_logo_v_150sq.jpg" class="">Hull's Department of English has reason to be proud of its reputation. In the last Research Assessment Exercise of 2008 ninety per cent of our research in the English submission was awarded an international profile, and 55% of our submission was&nbsp;ranked in the&nbsp;top two&nbsp;categories of 'internationally excellent' and 'world class'</p>
        <p>
            <br>
<a class="button" title="Visit the English Website" href="/fass/department_of_english.aspx">English Website</a>
        </p>
    </dd>
<dt><a>History<span>more details »</span></a></dt>

    <dd style="display: none;">
        <p>
            <img alt="Family tree scroll" title="Family tree scroll"...

CSS

body {
    font-family:"arial";
    font-size: 13px;
    line-height: 1.6;
}
a {
    color: #a22;
}
a.button {
    color: #fff;
    background: #a22;
    padding: 8px 15px;
    border-radius: 3px;
    text-decoration: none;
}
dl {
    margin-bottom: 15px;
    width: 95%;
}
dd {
    width: 100%;
    padding: 15px;
    margin-bottom: -1px;
    margin-left: 0;
    border: 1px solid #ccc;
    border-top: none;
    float: left;
    background: #fff;
    border-radius: 0 0 3px 3px;
}
dd img {
    float: right;
    margin: 3px 3px 3px 15px;
    box-shadow: 0px 0px 5px #ccc;
    padding: 7px;
}
dt a {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: -1px;
    padding: 10px 15px;
    text-decoration: none!important;
}
dt a:hover, dt a:focus {
    background: #eee;
}
a.deptLink {
    float: right;
    width: 201px;
    /* width of image */
    padding: 1px;
    border: 1px solid #ccc;
    margin: 2px 0 10px 10px;
    text-align: center;
    text-decoration: none;
}
a.deptLink:hover, a.deptLink:focus {
    border-color: #A02720;
}
dt span {
    float: right;
    color: #888;
    text-shadow: 1px 1px 1px #fff;
    font-size: 90%;
}

JavaScript

$(document).ready(function ($) {
    var allPanels = $('.accordion > dd').hide();
    $('.accordion > dt > a').click(function () {
        $this = $(this);
        $target = $this.parent().next();
        if (!$target.hasClass('active')) {
            allPanels.removeClass('active').slideUp();
            $target.addClass('active').slideDown();
        } else {
            $target.removeClass('active').slideUp();
        }
        return false;
    });
})(jQuery);