w3.css

아코디언

아코디언은 HTML 콘텐츠를 표시하고 숨기는 데 사용된다.

아코디언 내용을 숨기려면 w3-hide 클래스를 사용하자.

모든 종류의 버튼을 사용하여 콘텐츠를 열고 닫는다.

예제

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Open Section 1</button>

<div id="Demo1" class="w3-container w3-hide">
  <p>Some text..</p>
</div>

<script>
function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

아코디언과 드롭다운

이 표는 아코디언과 드롭다운의 차이점을 보여준다.

아코디언 버튼

HTML 요소를 사용하여 아코디언 콘텐츠를 열 수 있다.
페이지의 전체 너비(100% 너비)에 걸쳐 있는 w3-block 클래스 의 버튼을 선호한다.

W3.CSS의 버튼은 기본적으로 중앙에 위치한다는 점을 기억하자.
대신 왼쪽 정렬을 원하면 w3-left-align 클래스를 사용한다.
그러나 우리의 접근 방식을 따를 필요는 없다.
아코디언은 어느 쪽이든 좋아 보일 것이다.

예제

<button onclick="myFunc('Demo1')" class="w3-button">
Normal button</button>

<div id="Demo1" class="w3-hide">
  <p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align w3-green">
Left aligned and full-width</button>

<div id="Demo2" class="w3-hide">
  <p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
Centered and full-width</button>

<div id="Demo3" class="w3-hide w3-center">
  <p>Centered content as well!</p>
</div>

활성 아코디언 버튼

JavaScript를 사용하여 열려 있는(클릭한) 아코디언을 강조 표시한다.

예제

// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
  x.className += " w3-show";
  x.previousElementSibling.className += " w3-red";
} else {
  x.className = x.className.replace("w3-show", "");
  x.previousElementSibling.className =
  x.previousElementSibling.className.replace("w3-red", "");
}

아코디언 폭

기본적으로 블록 너비는 100%다.
이를 재정의하려면 아코디언 컨테이너의 CSS 너비 속성을 변경하자.

예제

<div class="w3-light-grey" style="width:50%">
  <button onclick="myFunction('Demo1')" class="w3-button w3-block">
    50%
  </button>
  <div id="Demo1" class="w3-hide">
    <p>Some text..</p>
  </div>
</div>

링크가 있는 아코디언

예제

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
  <a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
  <a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
  <a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>

목록으로서의 아코디언

예제

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
  <ul class="w3-ul">
    <li>Jill</li>
    <li>Eve</li>
    <li>Adam</li>
  </ul>
</div>

사이드바 내부의 아코디언

예제

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
  <div id="demoAcc" class="w3-hide">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>
  <div class="w3-dropdown-click">
    <a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

애니메이션 아코디언

아코디언 콘텐츠를 페이드, 확대/축소 또는 슬라이드하려면 w3-animate- 클래스 중 하나를 사용하자.

예제

<div id="Demo1" class="w3-hide w3-animate-zoom">

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기