Thứ Năm, 7 tháng 8, 2025

Toggle div Css + JS


 <!-- Bootstrap & FontAwesome 4.7 -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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


**** CSS

  <style>

    .panel-heading {

      position: relative;

      cursor: pointer;

    }

    .toggle-icon {

      position: absolute;

      right: 10px;

      top: 12px;

      font-size: 16px;

    }

  </style>

**** HTML

<div class="container" style="margin-top: 30px;">


  <div class="panel panel-primary">

    <div class="panel-heading">

      Tiêu đề 1

      <i class="fa fa-plus toggle-icon"></i>

    </div>

    <div class="panel-body" style="display: none;">

      aaaa

    </div>

  </div>


  <div class="panel panel-success">

    <div class="panel-heading">

      Tiêu đề 2

      <i class="fa fa-plus toggle-icon"></i>

    </div>

    <div class="panel-body" style="display: none;">

      bbbb

    </div>

  </div>


  <div class="panel panel-info">

    <div class="panel-heading">

      Tiêu đề 3

      <i class="fa fa-plus toggle-icon"></i>

    </div>

    <div class="panel-body" style="display: none;">

      ccc

    </div>

  </div>


</div>


****JS

<!-- jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

  $(document).ready(function(){

    $(".panel-heading").click(function(){

      var thisBody = $(this).next(".panel-body");

      var thisIcon = $(this).find(".toggle-icon");


      // Nếu panel đang mở thì đóng lại

      if (thisBody.is(":visible")) {

        thisBody.slideUp(200);

        thisIcon.removeClass("fa-minus").addClass("fa-plus");

      } else {

        // Đóng tất cả panel khác

        $(".panel-body").slideUp(200);

        $(".toggle-icon").removeClass("fa-minus").addClass("fa-plus");


        // Mở panel hiện tại

        thisBody.slideDown(200);

        thisIcon.removeClass("fa-plus").addClass("fa-minus");

      }

    });

  });

</script>

Không có nhận xét nào:

Đăng nhận xét