HTML 및 CSS를 사용하여 아코디언을 만드는 방법

HTML 및 CSS를 사용하여 아코디언을 만듭니다. 이 자습서에서는 HTML, CSS 및 Javascript를 사용하여 아코디언을 만드는 방법을 배웁니다. 아시다시피 아코디언은 레이블이나 썸네일 등과 같이 세로로 쌓인 항목 목록을 포함하는 강력한 요소입니다. 아코디언의 표준 예는 콘텐츠 표시/숨기기 작업이지만 목록에 여러 섹션을 포함하도록 확장됩니다.

우리가 아코디언을 만드는 이유.

글쎄, 우리는 큰 콘텐츠가 있을 때 아코디언을 사용해야 합니다. 원하는 위치에 토글을 추가하여 콘텐츠의 복잡성을 줄일 수 있습니다. 전체 내용을 숨기지만 사용자가 읽고 싶을 때 토글을 누르고 토글 제목과 관련된 내용을 보기만 하면 됩니다. 이제 반응형 아코디언을 만들기 위해 HTML CSS와 자바스크립트 코드를 작성해 보겠습니다. 웹 개발 경험이 없다면 HTML 온라인을 배워야 합니다.

먼저 코드를 작성할 텍스트 편집기를 엽니다. 그런 다음 파일을 만들고 Index.html과 같은 이름을 지정합니다. 이제 아래 코드를 복사하여 HTML 파일에 붙여넣기만 하면 됩니다.

HTML 코드

<button style="background-color:#ab2073;color:#fff;" class="soft-accordion">Accordion 1</button>
<div class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English..</p>
</div>
<button style="background-color:#b71dbf;color:#fff;" class="soft-accordion">Accordion 2</button>
<div class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<button style="background-color:#d61a2d;color:#fff;" class="soft-accordion">Accordion 3</button>
<div id="foo" class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>

CSS 코드

<style>
button.soft-accordion { background-color: #eee; color: #444;
    cursor: pointer;  padding: 18px;    width: 100%;
    border: none;    text-align: left;    outline: none;
    font-size: 15px;    transition: 0.4s;}
button.soft-accordion.active, button.soft-accordion:hover {
    background-color: #ddd;}
button.soft-accordion:after {    content: '\02795';
    font-size: 13px;    color: #fff;
    float: right;    margin-left: 5px;
}
button.soft-accordion.active:after { content: "\2796";}
div.section {
    padding: 0 18px;    background-color: white;
    max-height: 0;    overflow: hidden;
    transition: 0.6s ease-in-out;    opacity: 0;}
div.section.show {    opacity: 1;    max-height: 500px;  }
</style>

자바스크립트 코드:

<script>
var acc = document.getElementsByClassName("soft-accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }}
</script>

좋아, 모든 HTML CSS와 자바 코드를 복사하고 Accordion을 표시하려는 위치에 모두 복사했습니다. 아래 댓글에서 이 기사가 어떻게 도움이 되었는지 알려주세요.

워드프레스, 디지털 마케팅, 검색 엔진 최적화, 프로그래밍에 대해 알아보려면 저희 웹사이트를 방문하세요. https://softcodeon.com