Fade in/out

                        
<div id="wrap">
  <div class="contArea">
      <div class="tgArea fadeType01">
          <button type="button" class="btnFadeInout">
              <span>클릭!</span>
          </button>
          <div class="tgCont">
              <span>숨겨진 내용이 페이드 인아웃됩니다.</span>
          </div>
      </div>
  </div>
  <div class="contArea">
      <div class="tgArea fadeType02">
          <button type="button" class="btnFadeInout">
              <span>클릭!</span>
          </button>
          <div class="tgCont">
              <span>숨겨진 내용이 페이드 인아웃됩니다.</span>
          </div>
      </div>
  </div>
</div>

                        
.tgArea{
    &.fadeType01,&.fadeType02{
        .btnFadeInout{min-width: 100px; height: 40px; font-family: $d-fz; font-size: 0.88em;
        background-color: rgba($color: $dddBg, $alpha: 0.5);}
    }

    &.fadeType01{
        .tgCont{opacity: 0; visibility: hidden; transition: .5s;}
        .btnFadeInout.active ~.tgCont{opacity: 1; visibility: visible;}
    }

    &.fadeType02{
        .tgCont{display: none;}
    }
}

                        
.tgArea.fadeType01 .btnFadeInout, .tgArea.fadeType02 .btnFadeInout {
    min-width: 100px;
    height: 40px;
    font-family: "Noto Sans";
    font-size: 0.88em;
    background-color: rgba(221, 221, 221, 0.5);
}

.tgArea.fadeType01 .tgCont {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}

.tgArea.fadeType01 .btnFadeInout.active ~ .tgCont {
    opacity: 1;
    visibility: visible;
}

.tgArea.fadeType02 .tgCont {
    display: none;
}

                        
$(function(){
    $('.tgArea.fadeType01 .btnFadeInout').on({
        "click": function () {
            $(this).toggleClass('active').siblings('.btnFadeInout').removeClass('active');
        }
    });

    $('.tgArea.fadeType02 .btnFadeInout').on({
        "click": function () {
            $(this).siblings('.tgCont').fadeToggle();
        }
    });
});

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

CSS fade in/out

숨겨진 내용이 페이드 인아웃됩니다.

JS fade in/out

숨겨진 내용이 페이드 인아웃됩니다.