Jam's story

[JQuery] 메뉴클릭하면 글이 나오도록 본문

WEB/JQuery

[JQuery] 메뉴클릭하면 글이 나오도록

애플쩀 2022. 6. 6. 16:37 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 6. 3. - 오후 4:54:33</title>
//<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
 .container{
    width: 500px;
  }
  
  .collapsible{
    background-color: #777;
    color:white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline:none;
    font-size: 15px;
  }
  
   /* ::가상 요소 선택자*/
  .collapsible::after{
    content:'\002B';  /*   +  */
    color:white;
    float: right;
    font-weight: bold;
    margin-left: 5px;
  }
  
  .collapsible:hover ,  .active{
    background-color: #555;
  }
  
  .content{
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;  /* 오버플로우가 발생.. */
    overflow: hidden; /* 숨기기 */
    
    transition:max-height  0.2s ease-out;
  }
  
  .active::after{
      content:'\2212';   /*  -  */
   }
</style>

</head>
<body>

<h3>ex11.html</h3>

<div class="container">

<button class="collapsible">Section 1</button>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

<button class="collapsible">Section 2</button>
<div class="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 </div>

<button class="collapsible">Section 3</button> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

</div>
<script>
   $(".collapsible").click(function(event){
     $(this).toggleClass("active");
     if($(this).next().css("max-height") != "0px"){
      $(this).next().css("max-height", "0px");
     }else{
       $(this).next().css("max-height",$(this).next().prop("scrollHeight")+"px");
     }
   });
</script>
</body>
</html>
SS16 2022. 6. 3. - 오후 4:54:33 //

ex11.html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
저작자표시 (새창열림)

'WEB > JQuery' 카테고리의 다른 글

[JQuery] hide  (0) 2022.06.10
[JQuery] on() 메소드  (0) 2022.06.10
[JQuery] < ,> 버튼 과 목차버튼으로 이미지 넘기기  (0) 2022.06.06
[JQuery] input에서 입력받아 li태그로 만들기  (0) 2022.06.02
[JQuery] 만나이 계산  (0) 2022.06.02
'WEB/JQuery' Related Articles more
Comments