JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="env_menu_options dropMenu" id="prod_env_menu_options">
	<div class="env_list" id="show_prod_options">
        <span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1
    </div>
    <div class="prod_options detail">Content 1 <br>Content 1</div>
</div>
    <br>
<div class="env_menu_options dropMenu" id="stag_env_menu_options">
	<div class="env_list" id="show_stag_options">
        <span id="arrow_stag" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 2
    </div>
    <div class="stag_options detail">Content 2 <br>Content 2</div>
</div>
    <br>
<div class="env_menu_options dropMenu" id="qa_env_menu_options">
	<div class="env_list" id="show_qa_options">
        <span id="arrow_qa" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 3
    </div>
    <div class="qa_options detail">Content 3 <br>Content 3</div>
</div>

CSS

.detail {
    display:none;   
}

JavaScript

$(".dropMenu").on("click", function () {
    var notThisOne = $(this);

    $(".dropMenu").each(function() {
        if ($(this).attr("id") !== notThisOne.attr("id")) {            
            $(this).find(".arrow").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            $(this).find(".detail").slideUp("slow");
        } 
        else {
            $(this).find(".arrow").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
            $(this).find(".detail").slideToggle("slow");                
        }        
    });    
});