JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    		<div class="header">
    			<h1>Menu 1</h1>
    			<img class="toggle" src="http://oi42.tinypic.com/2zxxi1e.jpg" alt="Toggle" />
    		</div>

    		<div class="content">
    			Lorem ipsum...
    		</div>
    	</div>

CSS

div.container {
	margin-bottom:10px;
}

div.header {
	width:500px;
	height:30px;
	border:1px solid #000;
	position:relative;
	line-height:30px;
	padding-left:15px;
}	

div.header img.toggle {
	position:absolute;
	top:5px;
	right:5px;
	display:none;
	height:20px;
	cursor:pointer;
}

div.content {
	width:515px;
	height:auto;
	border:1px solid #000;
	border-top:none;
}

h1 {
	font-family: 'Alef', sans-serif;
	margin:0;
	padding:0;
	font-size:18px;
}

JavaScript

$(document).ready(function() {
        		$("img.toggle").css("display", "block");

    			$("img.toggle").click(function() {
                    var imgObj = $(this);
    				$(this).parent().siblings("div.content").slideToggle(function() {
    					src = imgObj.prop("src");
    					if(/212e4ax.jpg$/i.test(src)) {
    						imgObj.prop("src", "http://oi42.tinypic.com/2zxxi1e.jpg");
    					}
    					else {
    						imgObj.prop("src", "http://oi41.tinypic.com/212e4ax.jpg");
    					}
    				});
    			});
        	});