JSFiddle - React, Tailwind, and code Playground

by Kye Sooryun

HTML

<div class="acc-box">
  <h4 class="tit-acc">
    <button aria-expanded="false" class="acc-trigger" aria-controls="acc1" id="acc-box01" type="button">
      <span class="acc-subj">버튼1</span>
    </button>
  </h4>
  <div class="acc-cont"  id="acc1" role="region" aria-labelledby="acc-box01" hidden>
    <div class="inner">
      내용1
    </div>
  </div>
  <h4 class="tit-acc">
    <button aria-expanded="false" class="acc-trigger" aria-controls="acc2" id="acc-box02" type="button">
      <span class="acc-subj">버튼2</span>
    </button>
  </h4>
  <div class="acc-cont"  id="acc2" role="region" aria-labelledby="acc-box02" hidden>
    <div class="inner">
      내용2
    </div>
  </div>
</div>

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button {font-size:inherit; font-weight:normal; box-sizing:border-box; margin:0; padding:0;color:#666;}
fieldset,img {border:0 none;}
img {vertical-align:top;}
dl,ul,ol,menu,li {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:''; content:none;}
input,select,textarea,button {vertical-align:middle;}
input::-ms-clear {display:none;}
body {background:#fff; direction:ltr; -webkit-text-size-adjust:none;}
body,th,td,input,select,textarea,button {font-family:'DroidSansFallback', 'Malgun Gothic', 'Apple Gothic', Dotum ,Gulim,Helvetica,sans-serif; line-height:1.5;}
button {font-family:'DroidSansFallback','Apple Gothic', Dotum, Gulim,Helvetica,sans-serif; cursor:pointer; border:0 none; background-color:transparent;}
a {text-decoration:none; color:#222;}
a:hover {text-decoration:none;}
a:active {text-decoration:none; background-color:transparent;}
address,caption,cite,code,dfn,em,var,i {font-weight:normal; font-style:normal;}
table {width:100%;}
table,th,td {table-layout:fixed; border-collapse:collapse;}
table caption {overflow:hidden; font-size:medium; line-height:normal; width:100%; height:0; word-break:break-all; opacity:0; filter:alpha(opacity=0); -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';}
body {font-family:'DroidSansFallback','Apple Gothic',Dotum,Gulim,Helvetica,sans-serif; font-size:15px; line-height:23px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
input,textarea,button {border-radius:0; -webkit-appearance:none;}


.acc-box .tit-acc{background:#ddd url('../../images/mobile/common/icon_acc_arrow.png') no-repeat 95% 50%;background-size:14px 7.5px;}
.acc-box .tit-acc.on{background-image:url('../../images/mobile/common/icon_acc_arrow_on.png');}
.acc-box .tit-acc .acc-trigger{display:block;width:100%;padding:15px...

JavaScript

$(function(){
	var	_tit_acc = $('.acc-box').find('.tit-acc > button'),
			_acc_cont = $('.acc-cont');

	_tit_acc.on('click', function(){
		var	_this = $(this),
				_this_expanded = _this.attr('aria-expanded'),
				_this_conts = $(this).parent().next('.acc-cont');

		_tit_acc.parent().removeClass('on')
		_tit_acc.removeAttr('aria-disabled');
		_tit_acc.attr('aria-expanded', 'false');
		_acc_cont.attr('hidden', 'true').hide();

		if(_this_expanded == 'false'){
			_this.attr({
				'aria-expanded':'true',
				'aria-disabled':'true'
			});
			_this.parent().addClass('on')
			_this_conts.removeAttr('hidden').show();
		}
		
	});
});