jquery accordion 메뉴

jquery를 통해서 accordion 메뉴를 구현 해봤다.

 

HTML

<div class="accordion">
   <div class="item">
      item 1
   </div>
   <div class="content">
      content 1
   </div>
   <div class="item">
      item 2
   </div>
   <div class="content">
      content 2
   </div>      
   <div class="item">
      item 3
   </div>
   <div class="content">
      content 3
   </div>      
</div>

 

js

$(function () {
    $('.accordion .item').first().addClass('active');
    $('.accordion .content').first().show().animate({ width: '70%' });
    $('.accordion .item').click(function () {
        $(this).addClass("active").siblings('.item').removeClass('active');
        $(this).next().show().animate({ width: '70%' }).siblings('.content').animate({ width: 0 }, function () {
            $(this).hide();
        });
    });
});

 

css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@200,400&display=swap");

* {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	margin: 0;
}

.accordion div {
	display: inline-block;
	height: 150px;
}

.accordion .item.active {
	background: red;
}

.accordion .item {
	background: blue;
}