$('.box-1 > *').click(function() {
  let $this = $(this);

  // 세개 중 하나 쓰기
  // 32강) $this.parent().children().addClass('active');
  // 33강) $this.parent().find('> *').addClass('active');
  // 34강) $this.siblings().addClass('active');

  $this.siblings().addClass('active');
  $this.removeClass('active');
});

동영상

2602, JS, jQuery, 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택, find

2602, JS, jQuery, 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택, siblings

35강 - 아코디언 구현, 기본 디자인

라이브러리 태그

.js => 자바스크립트 라이브러리 => <script src="~"> </script>
.css => css 라이브러리 => <link href="~" rel=stylesheet>

문제

ul>li>div.faq-box__question>span{질문 1}

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<section class="sec sec-faq">
  <div class="container">
    <h1>FAQ</h1>

    <div class="faq-box">
      <ul>
        <li>
          <div class="faq-box__question">
            <span>질문 1</span>
          </div>
          <div class="faq-box__answer">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt id quae beatae quasi magni dicta odio fugit adipisci quidem pariatur voluptatem, soluta rem minus eligendi rerum ipsam maxime excepturi eos.</p>
          </div>
        </li>
        <li>
          <div class="faq-box__question">
            <span>질문 2</span>
          </div>
          <div class="faq-box__answer">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt id quae beatae quasi magni dicta odio fugit adipisci quidem pariatur voluptatem, soluta rem minus eligendi rerum ipsam maxime excepturi eos.</p>
          </div>
        </li>
        <li>
          <div class="faq-box__question">
            <span>질문 3</span>
          </div>
          <div class="faq-box__answer">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt id quae beatae quasi magni dicta odio fugit adipisci quidem pariatur voluptatem, soluta rem minus eligendi rerum ipsam maxime excepturi eos.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

[CSS]

/* ------------------- 노말라이즈 ------------------- */
body, ul, li { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* ------------------- 커스텀 -------------------*/
/* ------------------- 섹션 - faq 시작 ------------------- */
/* ------------------- 컨테이너 시작 ------------------- */
.sec-faq > .container { max-width: 1200px; margin: 0 auto; }

/* ------------------- 컨테이너 faq-box 시작 -------------------*/
/* ------------------- container faq-box - question start ------------------- */
.sec-faq > .container > .faq-box { border: 2px solid black; background-color: #343434; color: #f5f5f5; padding: 10px; }
.sec-faq > .container > .faq-box > ul > li { padding: 10px; }
.sec-faq > .container > .faq-box .faq-box__question { cursor: pointer; margin-bottom: 5px; }
.sec-faq > .container > .faq-box .faq-box__question::after { content: "[+]"; float: right; }
.sec-faq > .container > .faq-box > ul > li:hover .faq-box__question::after { content: "[-]"; }
/* ------------------- container faq-box - question end ------------------- */

/* ------------------- container faq-box - answer start ------------------- */
.sec-faq > .container > .faq-box .faq-box__answer { background-color: gray; border-radius: 10px; padding: 10px; display: none; }
.sec-faq > .container > .faq-box > ul > li:hover .faq-box__answer { display: block; }
/* ------------------- container faq-box - answer end ------------------- */
/* ------------------- 컨테이너 faq-box 끝 ------------------- */

/* ------------------- 컨테이너 끝 ------------------- */
/* ------------------- 섹션 - faq 끝 ------------------- */

동영상

2602, JS, jQuery, 아코디언 구현, 기본 디자인 구성

36강 - 아코디언 구현, 애니메이션 없는 버전

문제

문제 - 아코디언 구현, 애니메이션 없는 버전

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

/* ------------------- 노말라이즈 ------------------- */
body, ul, li { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.faq-box {
  border:2px solid black;
  background-color:#343434;;
  color:white;
  padding:10px;
}

.faq-box__question {
  cursor:pointer;
}

.faq-box__question::after {
  content:"[+]";
  float:right;
}

.faq-box > ul > li {
  padding:10px;
}

.faq-box > ul > li.hover > .faq-box__question::after {
  content:"[-]";
}

.faq-box__answer {
  display:none;
  background-color:#565656;
  border-radius:10px;
  padding:10px;
}

.faq-box > ul > li.hover > .faq-box__answer {
  display:block;
}

[JS]

동영상

2602, JS, jQuery, 아코디언 구현, 애니메이션 없는 버전

37강 - 아코디언 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트

개념

개념 - 아코디언 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트

[HTML]

[CSS]

section {
border:2px solid red;
display:none;
}

[JS]

$('.btn-1').click(function() {
  $('section').show();
  // $('section').hide();
});

$('.btn-2').click(function() {
  $('section').fadeIn(2000);
  //$('section').fadeOut(2000);
});

$('.btn-3').click(function() {
  $('section').slideDown(5000);
  // $('section').slideUp(5000);
});

동영상

2602, JS, jQuery, 아코디언 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트

38강 - 아코디언 구현, slideDown

문제

문제 - 아코디언 구현, slideDown

문제 - 정답예시

문제 - 정답

39강 - 아코디언 구현, slideUp

문제

문제 - 아코디언 구현, slideUp

문제 - 정답예시

문제 - 정답

[HTML]

<meta name="viewport" content="width=device-width, initial-scale=1">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.4/tailwind.min.css">


<section class="section section-faq">
  <div class="container mx-auto">
    <h1>FAQ</h1>

    <div class="faq-box">
      
      <ul>
        <li>
          <div class="faq-box__question"><span>질문 1</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi vitae quaerat provident aliquam possimus, ducimus eveniet dolorum quia amet. Tenetur fugiat unde labore molestiae ut, corrupti nobis? Asperiores, minus quos?</div>
            <div>Officiis optio minus repellat nihil voluptates fugit maxime! Consectetur saepe voluptate explicabo, error debitis eaque officia facere deserunt magni maiores ab culpa mollitia earum adipisci eligendi placeat qui, cupiditate harum.</div>
            <div>Eaque dignissimos cupiditate placeat ratione rem obcaecati amet, magnam reprehenderit a quam perspiciatis ad sit velit consectetur excepturi. Nisi hic, ipsa minus nobis consequatur adipisci animi voluptate. Voluptates, quidem est.</div>
            <div>Porro perferendis et pariatur sint labore doloribus explicabo incidunt earum dolores, necessitatibus impedit sequi quia architecto, praesentium, cum minus officia assumenda blanditiis reiciendis cumque ratione! Beatae vero corporis tenetur impedit.</div>
            <div>Tempore ex magni mollitia excepturi commodi facere officia sunt nisi placeat, perferendis asperiores quos! Asperiores at, perspiciatis, dignissimos suscipit rerum inventore hic reiciendis sapiente commodi illo ducimus! Quod, sequi natus!</div>
            <div>Molestias, quasi dolorum sint debitis odio voluptatibus amet hic, esse ut earum animi corporis quisquam exercitationem vitae doloribus! Voluptates adipisci tempore praesentium doloremque voluptatum officiis minima ab distinctio eligendi accusantium?</div>
            <div>Illum eum commodi est voluptas rem officiis delectus expedita architecto optio cumque facilis ducimus maiores reiciendis, nemo alias eaque, eveniet iure. Placeat in tempora modi suscipit est neque dolores officia!</div>
            <div>Dolore obcaecati fugit beatae, earum reiciendis cum. Maiores odit alias harum voluptatum illo neque. Praesentium expedita libero tempore blanditiis aliquid voluptates, beatae deleniti nesciunt molestias nam quam quos cumque minima?</div>
            <div>Mollitia modi laboriosam voluptate quae facere odio. Nesciunt vitae maxime in consectetur facere doloremque ad beatae labore fugit officiis nihil ea, quam quae? Veniam aliquid, nemo quasi itaque dolorem eos?</div>
            <div>Dolorem maiores mollitia expedita facilis incidunt eaque cumque velit maxime, dolore neque? Earum distinctio, repellendus dolorem praesentium hic quod veritatis, corrupti veniam excepturi, minus quas ex deserunt obcaecati nostrum quaerat!</div>
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 2</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et commodi eius doloremque enim voluptates nemo, corrupti culpa fugit ratione inventore. Quibusdam cum maxime vitae error minima mollitia tenetur unde vel?</div>
            <div>Optio, quae! Eius perferendis incidunt deleniti voluptatum ab quis totam cupiditate, dicta a illum quisquam? Corporis praesentium tenetur adipisci dolores. Deleniti dolore odit illo sed. Iste quae tempora dolorum incidunt.</div>
            <div>Itaque ex deserunt nostrum vitae ratione repellendus delectus eaque pariatur nesciunt vero ad repellat laudantium, sed magnam. Dolore hic recusandae saepe. Magnam ullam illo velit doloremque vitae porro ipsam itaque.</div>
            <div>A dicta voluptatum sit natus quos eos ex blanditiis eaque tenetur dignissimos molestias aperiam repellat sunt officiis fugiat provident, commodi consequatur sequi quasi! Ut commodi minima similique impedit necessitatibus inventore!</div>
            <div>Voluptates est molestiae veritatis repellendus magni? Expedita tempora ex qui nam voluptate ipsam voluptates eos? Minus modi maiores rerum odit optio repellat est vero magni perspiciatis esse, exercitationem nam impedit.</div>
            <div>Dignissimos labore est quae ab aspernatur, quo, neque aut dolores perspiciatis rem maiores saepe esse doloremque praesentium. Beatae consequuntur deserunt consequatur vero, hic odio provident illo inventore quasi dolores alias.</div>
            <div>Eveniet minus assumenda laboriosam dolor officia tempore eos ad vero magni doloribus, sit praesentium optio aliquam explicabo itaque! Ad omnis amet ea debitis animi cupiditate quibusdam iste, quo accusantium nam.</div>
            <div>Nesciunt, consequatur provident, obcaecati aut beatae quaerat iusto id cupiditate ea neque saepe ab unde, fugiat error expedita! Magni accusantium hic nihil repellendus eveniet odit quidem blanditiis enim repudiandae nisi.</div>
            <div>Quo, architecto? Nobis est qui ducimus doloremque quidem explicabo voluptates eius accusamus voluptatibus reprehenderit a modi ad, eligendi veritatis. Molestiae eveniet esse porro odit, numquam aut placeat nostrum magnam obcaecati!</div>
            <div>Dignissimos praesentium vel tempore architecto velit? Error perspiciatis officia sed non assumenda hic voluptatem molestiae nesciunt illum, commodi odio doloremque minima sequi aperiam vel eius laborum, vero excepturi perferendis sint!</div>
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 3</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat soluta corporis molestiae deleniti omnis cum iusto quas laborum quidem velit exercitationem illum officiis, facere reprehenderit consequatur laudantium quisquam nulla ex.</div>
            <div>Repudiandae numquam ex dolor? Dolores ducimus beatae nostrum eius, perspiciatis at eos in dolore ipsam eligendi aliquam ipsa temporibus molestiae voluptatem quas architecto ea amet ex nihil vitae unde facere!</div>
            <div>Aliquid doloribus repellendus officiis repellat perferendis nobis saepe, cumque eligendi pariatur iste ipsum facilis dolor optio temporibus amet consectetur, sed quae aut nisi obcaecati. Iusto eum possimus harum iure molestiae.</div>
            <div>Tempora nulla quia ad, dolor quis doloremque corrupti commodi. Molestiae dignissimos, in excepturi ad nobis consectetur minima. Repellendus, rem? Fuga similique modi ipsa tenetur amet quisquam voluptate labore. Id, consequatur.</div>
            <div>Amet dignissimos ducimus ratione possimus nihil nulla error provident consequuntur veritatis minima nostrum cupiditate dicta quia numquam eveniet ad iure voluptatibus, neque tempore, perferendis quo. Natus ut quod deleniti officia.</div>
            <div>Sit, sunt cumque! Excepturi sapiente dolorem quidem! Sint provident enim tempora, labore distinctio eos odio quaerat incidunt nemo blanditiis doloremque quasi fugiat voluptas possimus fuga alias quod animi veritatis expedita!</div>
            <div>Ipsam aperiam quia tenetur. Nulla facere omnis sapiente cupiditate libero vel recusandae velit animi quae sunt tenetur, corporis quam illo ipsa veniam non alias dolore, ducimus esse tempore. Culpa, velit?</div>
            <div>Natus, expedita. Nobis esse ipsa maxime, cum consectetur aliquid recusandae, quidem distinctio et nulla sit quasi corrupti quis enim? Voluptatum excepturi vero earum amet aut ullam reprehenderit consequatur tempora aliquam!</div>
            <div>Id minus odio unde natus pariatur excepturi? Natus explicabo velit amet sequi officiis quia tenetur fugiat dolore, labore quas aliquid commodi nisi sint adipisci cumque qui corrupti facere nihil atque.</div>
            <div>Distinctio, corrupti unde aut iste molestiae, inventore maxime, quod explicabo iusto commodi officiis sit! Provident quisquam qui ad ab est nemo delectus nihil, in recusandae, obcaecati dolorum! Molestias, ipsum perferendis.</div>
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 4</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sunt vel provident, unde quos ullam ipsum quis tempore amet mollitia quo numquam maxime error nisi! Eaque placeat atque voluptatum odit?</div>
            <div>Eveniet, cupiditate quo at quod repellendus nulla quae inventore, delectus consectetur dolorum rerum ex quasi iste aspernatur eos expedita voluptatibus placeat? Id necessitatibus facere mollitia, sint labore fugit asperiores incidunt.</div>
            <div>Vero atque exercitationem qui, in suscipit cumque magnam? Cum commodi minus alias. Accusantium reiciendis quaerat recusandae ullam esse minus doloremque in enim pariatur natus, distinctio consequatur ipsam suscipit magnam asperiores!</div>
            <div>Odio veritatis voluptatum, et autem reiciendis aperiam. Odit vero repellat dolor assumenda ab id, exercitationem expedita modi, nihil sed soluta quisquam? Possimus sed ipsam hic cum, beatae adipisci accusamus mollitia?</div>
            <div>Cum cupiditate cumque excepturi dicta dolorem exercitationem odio eligendi nobis reiciendis et, sint totam fugit quaerat aut. Aliquam aliquid, facilis quaerat, fuga placeat, totam architecto ratione fugiat non corrupti harum.</div>
            <div>Aspernatur maiores ut, ex ipsum maxime mollitia ad qui voluptatum quibusdam veniam nobis nulla eius accusamus inventore obcaecati totam iste. Aut ratione quas ut voluptatibus dolor consectetur ea magnam repellendus.</div>
            <div>Inventore aut quasi perspiciatis, pariatur ducimus vel sapiente similique velit deserunt ullam, praesentium optio exercitationem. Iusto, eaque velit et vero deserunt quod accusantium tempore quos optio odit incidunt hic ut.</div>
            <div>Amet animi dolor et praesentium quas nesciunt blanditiis eligendi facere voluptates vitae odio inventore harum tenetur qui delectus nulla quos quasi, earum temporibus! Ea eligendi voluptates modi placeat, aliquid ullam!</div>
            <div>Totam aperiam modi, aspernatur at consectetur error earum quasi accusantium explicabo ad delectus alias adipisci ipsum, iure possimus ex aut placeat labore veniam veritatis enim reiciendis saepe perferendis obcaecati? Provident?</div>
            <div>Nemo animi harum cumque ducimus veritatis, alias exercitationem! Incidunt ipsam cum, sint aperiam quam modi molestias? Dolorem quis, culpa commodi, laudantium error soluta aperiam iure velit fugit praesentium itaque? Cupiditate.</div>
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 5</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti eveniet corrupti officia possimus laborum, sapiente ex eos delectus quidem consequuntur fuga nam, qui laboriosam. Ducimus quisquam enim fugiat rem aut?</div>
            <div>Alias non incidunt voluptatibus, omnis quas labore quasi doloribus fuga, nihil ex optio, neque deserunt dolorem adipisci sint temporibus dolor error cupiditate tempore totam assumenda iste ipsum. Laborum, quisquam dolores!</div>
            <div>Eius quasi, beatae, eveniet error aut praesentium tempora fugit temporibus deleniti nobis consequatur provident nemo cumque et minima. Reiciendis libero minima consequatur minus natus accusamus iure porro laboriosam a eum?</div>
            <div>Autem ad quas vitae non esse ratione sit velit aspernatur ut corporis! Illo a nam accusantium sunt maxime, commodi omnis optio laborum magnam facilis assumenda dignissimos dolore in eaque id?</div>
            <div>Dicta iure, temporibus dolorum, voluptas aspernatur necessitatibus sed a accusamus vero ut, dignissimos facilis illo! Blanditiis error, laboriosam quisquam dolore architecto, illo, ratione animi beatae aliquam eligendi possimus officia. Molestiae!</div>
            <div>Quod soluta magni rem a, quam temporibus optio nostrum nobis excepturi, expedita consectetur esse, quidem nesciunt! Hic eveniet assumenda aperiam consectetur totam eum eius ex ut asperiores, magni, et libero?</div>
            <div>Recusandae, similique expedita sint animi cumque autem culpa distinctio quo eum hic ut eveniet, illum sed inventore, maiores vitae nostrum modi eaque. Ratione libero necessitatibus quaerat, labore ea aspernatur provident!</div>
            <div>Totam dolores, animi corporis asperiores facere natus id amet ipsum laboriosam harum? Nihil, dolorum? Ipsam porro odio at! Debitis soluta molestias voluptatum incidunt fugiat dolores officiis ipsum omnis dolore similique.</div>
            <div>Nesciunt nemo in dolores. Unde aliquid quod assumenda voluptatum corporis animi quis expedita consequatur, earum modi natus ipsa odio architecto qui vero iusto exercitationem suscipit? Vero illo assumenda culpa aspernatur.</div>
            <div>Repellat, voluptates recusandae. Sed iusto blanditiis suscipit at cum, saepe quas deleniti nesciunt sapiente! Incidunt beatae deleniti dolor commodi nihil ex dicta, neque error, sequi voluptatum non odio, tempore natus?</div>
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 6</span></div>
          <div class="faq-box__answer">
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum itaque ratione quaerat a ad ipsam hic illo unde amet, maiores accusantium neque fugiat natus? Voluptatibus dolore blanditiis voluptatem rem libero?</div>
            <div>Cumque nam similique mollitia. Aut eveniet est debitis eaque iure, totam deleniti sunt inventore similique expedita, sint quasi recusandae saepe aliquam enim reiciendis unde, et porro placeat! Inventore, totam aliquid!</div>
            <div>Debitis quam hic dolor minus tenetur dolorem consequuntur illo minima sed optio doloremque eveniet autem aut voluptatem officia, eius maiores. Ut et pariatur suscipit eligendi excepturi fugiat ex, fugit fuga.</div>
            <div>Quae aliquid exercitationem in velit tenetur? Voluptatibus aliquid inventore eos id architecto illum minus eveniet cum maiores porro ratione, in, asperiores dicta consectetur, deserunt excepturi ipsam incidunt doloremque. Voluptates, porro.</div>
            <div>Asperiores earum laborum a. Quas, odit distinctio a molestias eius fugiat ex animi quibusdam quasi sequi? Ex magni, nesciunt repellendus placeat, ipsam ipsum facilis molestiae obcaecati ut, delectus nam porro?</div>
            <div>Ad iusto nam quis, debitis suscipit maxime aliquid nulla vel dolore itaque quam voluptatum. Amet magni eum ab pariatur soluta dolores optio illo, aspernatur ex totam possimus aperiam neque maiores.</div>
            <div>Magni provident saepe sunt reiciendis enim aut molestiae suscipit, quo asperiores commodi nobis non laboriosam eaque id harum porro officia? Obcaecati, provident incidunt? Vero, hic odit. Labore eum vitae sapiente.</div>
            <div>Repudiandae facilis natus molestiae similique pariatur, asperiores quam consequuntur accusantium. Repellat error iusto hic quos harum aliquam, porro quibusdam mollitia quidem facilis veritatis in ipsa quisquam. Dolor incidunt minima placeat.</div>
            <div>Iure, repellat, recusandae error odit optio voluptates doloribus magni, repudiandae dolor sapiente nemo distinctio! Tempore autem hic necessitatibus repudiandae culpa non enim consequuntur provident, officia dolorem praesentium. Ea, vitae sequi.</div>
   &nb

[CSS]

.faq-box {
  border:2px solid black;
  background-color:#343434;;
  color:white;
  padding:10px;
}

.faq-box__question {
  cursor:pointer;
}

.faq-box__question::after {
  content:"[+]";
  float:right;
}

.faq-box > ul > li {
  padding:10px;
}

.faq-box > ul > li.hover > .faq-box__question::after {
  content:"[-]";
}

.faq-box__answer {
  display:none;
  background-color:#565656;
  border-radius:10px;
  padding:10px;
}

[JS]

동영상

2603, JS, jQuery, 아코디언 구현, slideDown

2603, JS, jQuery, 아코디언 구현, slideUp

'코딩 > 수업메모' 카테고리의 다른 글

JQ 44~ 47강 개념 - 제이쿼리 (0)	2026.03.06
JQ 40 ~ 43강 개념 - 제이쿼리 (0)	2026.03.05
JQ 22~31강 개념 - 제이쿼리 (0)	2026.03.03
JQ 13~21강 개념 - 제이쿼리 (0)	2026.02.27
JQ 8~12강 개념 - 제이쿼리 (0)	2026.02.26

현재글JQ 32~39강 개념 - 제이쿼리(아코디언)

ponyo118 님의 블로그

ponyo118 님의 블로그 입니다.

Today :
Yesterday :

ponyo118 님의 블로그

JQ 32~39강 개념 - 제이쿼리(아코디언)

32~4강 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

32강

문제

33강

문제

34강

문제

동영상

35강 - 아코디언 구현, 기본 디자인

라이브러리 태그

문제

동영상

36강 - 아코디언 구현, 애니메이션 없는 버전

문제

동영상

37강 - 아코디언 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트

개념

동영상

38강 - 아코디언 구현, slideDown

문제

39강 - 아코디언 구현, slideUp

문제

동영상

'코딩 > 수업메모' 카테고리의 다른 글

'코딩/수업메모'의 다른글

티스토리툴바

« 2026/06 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

JQ 32~39강 개념 - 제이쿼리(아코디언)

32~4강 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

32강

문제

33강

문제

34강

문제

동영상

35강 - 아코디언 구현, 기본 디자인

라이브러리 태그

문제

동영상

36강 - 아코디언 구현, 애니메이션 없는 버전

문제

동영상

37강 - 아코디언 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트

개념

동영상

38강 - 아코디언 구현, slideDown

문제

39강 - 아코디언 구현, slideUp

문제

동영상

'코딩 > 수업메모' 카테고리의 다른 글

'코딩/수업메모'의 다른글

관련글

티스토리툴바