JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<dl class="accordion">
    <dt><span>Title 1</span><i class="accordion_icon fa fa-plus"></i></dt>
    <dd class="accordion_content">Content 1</dd>
    <dt><span>Title 2</span><i class="accordion_icon fa fa-plus"></i></dt>
    <dd class="accordion_content">Content 2</dd>
    <dt><span>Title 3</span><i class="accordion_icon fa fa-plus"></i></dt>
    <dd class="accordion_content">Content 3</dd>
</dl>

CSS

body {
    font-family: Arial;
}

.accordion {
    border-top: 1px solid #c1c1c1;
}

.accordion dt {
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
    display: block;
    cursor: pointer;
    overflow: hidden;
}

.accordion dt span {
    float: left;
    font-weight: normal;
    font-size: 17px;
}

.accordion dt .accordion_icon {
    float: right;
}

.accordion dt.active {
    background: #DBDBDB;
}

.accordion_content {
    margin: 0;
    padding: 15px;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-bottom: 1px solid #c1c1c1;
}

JavaScript

jQuery('.accordion dt').click(function() {
    $('.accordion dt').find('i').removeClass('fa-minus'); // Hides the minus sign on click
    $(this).find('i').addClass('fa-plus fa-minus'); // add this line
    jQuery('.accordion dt').removeClass('active');
    jQuery('.accordion_content').slideUp('normal');

    if(jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
    }

});

jQuery('.accordion_content').hide();