[jquery] 아코디언 기능 구현

[jquery] 아코디언 기능 구현

 

쇼핑몰에서 상품 목록 상세내역에 많이 사용되는 아코디언을 제이쿼리로 구현하였습니다. 

 

구현 화면

 

구현 영상

 

제이쿼리 스크립트 및 css

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
    .product {
        font-size: 12px;
        width: 600px;
    }

    .accordion-container {
        padding-top: 20px;
        position: relative;
        width: 100%;
        border-bottom: 1px solid rgba(0 0 0 / 60%);
        border-top: none;
        outline: 0;
        cursor: pointer
    }

    .accordion-container .article-title {
        display: block;
        color: #333 !important;
        position: relative;
        margin: 0;
        line-height: 30px;
        border-top: 1px solid rgb(0 0 0 / 60%);
        font-size: 12px;
        cursor: pointer;
    }

    .accordion-container .content-entry .article-title:before {
        background-image: url('이미지 주소');
        background-size: 100%;
        width: 12px;
        height: 12px;
        margin-top: 9px;
        content: "";
        float: right;
        background-repeat: no-repeat;
    }

    .accordion-container .content-entry.open .article-title:before {
        background-image: url('이미지 주소');
    }

    .accordion-content {
        display: none;
        padding: 20px 0;
    }
</style>

 

아코디언 jQuery 코드

<script>
    $(function () {
        let Accordion = function (el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;

            let links = this.el.find('.article-title');
            links.on('click', {
                el: this.el,
                multiple: this.multiple
            }, this.dropdown)
        }

        Accordion.prototype.dropdown = function (e) {
            let $el = e.data.el;
            $this = $(this);
            $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');

            if (!e.data.multiple) {
                $el.find('.accordion-content').not($next).slideUp().parent().removeClass('open');
            };
        }
        let accordion = new Accordion($('.accordion-container'), false);
    });

    $(document).on('click', function (event) {
        if (!$(event.target).closest('#accordion').length) {
            $this.parent().toggleClass('open');
        }
    });
</script>

 

html 구조

<div class="product">
    <p><strong>title</strong></p>
    <p>...</p>
    <section id="content">
        <div class="accordion-container" id="accordion">
            <!-- article1 -->
            <article class="content-entry">
                <h4 class="article-title">subtitle1</h4>
                <div class="accordion-content">
                    <p>.../</p>
                </div>
            </article>
            <!-- article2 -->
            <article class="content-entry">
                <h4 class="article-title">subtitle2</h4>
                <div class="accordion-content">
                   <p>.../</p>
                </div>
            </article>
            <!-- article3 -->
            <article class="content-entry">
                <h4 class="article-title">subtitle3</h4>
                <div class="accordion-content">
                     <p>.../</p>
                </div>
            </article>
        </div>
    </section>
</div>