JQuery Accordion Tabs

<div id="accordion" class="accordion">

<div class="accordion-box">
<a href="#" class="accordion-header active-accordion" data-target="acrd_1">Menu 1</a>
<div class="accordion-content" id="acrd_1" style="display:block">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus....</div>
</div>

<div class="accordion-box">
<a href="#" class="accordion-header" data-target="acrd_2">Menu 2</a>
<div class="accordion-content" id="acrd_2">
	A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart....</div>
</div>

<div class="accordion-box">
<a href="#" class="accordion-header" data-target="acrd_3">Menu 3</a>
<div class="accordion-content" id="acrd_3">
	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,...</div>
</div>

</div>

.accordion {
    font-family: Arial,Helvetica,sans-serif;
    width: 500px;
    display: inline-block;
    position: relative;
    max-width: 100%;
}
a.accordion-header {
    display: block;
    background-color: #7c7c7c;
    background-image: linear-gradient(180deg, #7c7c7c, #4f4f4f);
    color: #fff;
    padding: 10px 5px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 2px;
    text-decoration: none;
    text-align: left;
}
a.accordion-header.active-accordion {
    background-color: #ff0057;
    background-image: linear-gradient(180deg, #ff0057, #b70041);
}
.accordion-content {
    display: none;
    position: relative;
    padding: 10px;
    border: solid 2px #b80041;
    margin-top: -2px;
    border-top: none;
    margin-bottom: 2px;
    text-align: left;
    font-size: 14px;
}
a.accordion-header:after {
    content: '\002b';
    color: #fff;
    font-weight: bold;
    float: right;
    margin-left: 10px;
    font-size: 15px;
}
a.accordion-header.active-accordion:after {
    content: '\2212';
}

$(function() {
	$(".accordion-header").click(function(event) {
		event.preventDefault();
		var dis = $(this);
		var acr_box = dis.closest(".accordion");
		if(!dis.hasClass("active-accordion")){
			acr_box.find(".accordion-header").removeClass("active-accordion");
			dis.addClass("active-accordion");
			acr_box.find(".accordion-content").slideUp();
			dis.next().stop(true,true).slideToggle();
		}
	});
});

<div id="accordion" class="accordion">

<div class="accordion-box">
<a href="#" class="accordion-header active-accordion">Menu 1</a>
<div class="accordion-content" id="acrd_1" style="display:block">
	<img src="https://www.html-code-generator.com/images/HTMLpicture.png" style="width:150px;margin: 5px;" alt=""><img src="https://www.html-code-generator.com/images/CSSpicture.png" style="width:150px;margin: 5px;" alt="">
	</div>
</div>

<div class="accordion-box">
<a href="#" class="accordion-header">Menu 2</a>
<div class="accordion-content" id="acrd_2">
	<img src="https://www.html-code-generator.com/images/HTMLpicture.png" style="width:150px;margin: 5px;" alt=""><img src="https://www.html-code-generator.com/images/CSSpicture.png" style="width:150px;margin: 5px;" alt="">
	</div>
</div>

<div class="accordion-box">
<a href="#" class="accordion-header">Menu 3</a>
<div class="accordion-content" id="acrd_3">
	<img src="https://www.html-code-generator.com/images/HTMLpicture.png" style="width:150px;margin: 5px;" alt=""><img src="https://www.html-code-generator.com/images/CSSpicture.png" style="width:150px;margin: 5px;" alt="">
	</div>
</div>

</div>

.accordion {
    font-family: Arial,Helvetica,sans-serif;
    width: 500px;
    display: inline-block;
    position: relative;
    max-width: 100%;
}
a.accordion-header {
    display: block;
    background-color: #7c7c7c;
    background-image: linear-gradient(180deg, #7c7c7c, #4f4f4f);
    color: #fff;
    padding: 10px 5px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 2px;
    text-decoration: none;
    text-align: left;
}
a.accordion-header.active-accordion {
    background-color: #ff0057;
    background-image: linear-gradient(180deg, #ff0057, #b70041);
}
.accordion-content {
    display: none;
    position: relative;
    padding: 10px;
    border: solid 2px #b80041;
    margin-top: -2px;
    border-top: none;
    margin-bottom: 2px;
    text-align: left;
    font-size: 14px;
}
a.accordion-header:after {
    content: '\002b';
    color: #fff;
    font-weight: bold;
    float: right;
    margin-left: 10px;
    font-size: 15px;
}
a.accordion-header.active-accordion:after {
    content: '\2212';
}

/************ CSS Animation ***********/

.animation_acrd {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

(function () {
	var accordion = document.getElementById("accordion");
	var tabs_menu = accordion.getElementsByClassName("accordion-header");
	for (var k = 0; k < tabs_menu.length; k++) {
		tabs_menu[k].onclick = js_accordion_toggle;
	}
	function js_accordion_toggle() {
		var tabs_panel = accordion.getElementsByClassName("accordion-content");
		for (var i = 0; i < tabs_panel.length; i++) {
			tabs_panel[i].style.display = "none";
			tabs_panel[i].classList.remove("animation_acrd", "zoomIn");
		}
		for (var j = 0; j < tabs_menu.length; j++) {
			tabs_menu[j].classList.remove("active-accordion");
		}
		this.classList.add("active-accordion");
		var content = this.nextElementSibling;
		content.classList.add("animation_acrd", "zoomIn");
		content.style.display = "block";
		return false;
	}
})();