Code phần hỏi đáp web wordpress Accordion Bootstrap 4

Link tham khảo

https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

Code custom field

<?php if(get_field('nhieu_hoi_dap')): ?>
	<div class="hoidap">
		<h2>Câu hỏi thường gặp</h2>
	</div>
	<div id="accordion">
		<?php $i=1; ?>
	  <?php while(has_sub_field('nhieu_hoi_dap')): ?>  
	  <div class="card">
	    <div class="card-header">
	      <a class="card-link" data-toggle="collapse" href="#collapse<?php echo $i; ?>">
	      	<div class="tieudehoi">
	      		<h3><?php the_sub_field('tieu_de_hoi_dap'); ?></h3>
	      	</div>
	      </a>
	    </div>
	    <div id="collapse<?php echo $i; ?>" class="collapse" data-parent="#accordion">
	      <div class="card-body">
	        <?php the_sub_field('noi_dung_hoi_dap'); ?>
	      </div>
	    </div>
	  </div>
	  <?php $i++; ?>
	  <?php endwhile; ?>

	</div>
	<?php endif; ?>

Code css

/* hoi dap */
.hoidap {
    margin-top: 20px;
    margin-bottom: 10px;
}


a.card-link:after {
    content: "+";
    background-color: #e33a40;
    position: absolute;
    left: 10px;
    top: 8px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 34px;
    font-weight: 400;
    border: none;
    text-align: center;
    color: #fff;
    -webkit-transition: .3s transform;
    -moz-transition: .3s transform;
    -o-transition: .3s transform;
    transition: .3s transform;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.tieudehoi {
    padding-left: 26px;
}

.card {
    margin-bottom: 10px;
}

.card-header {
    border-bottom: 1px solid #e33a40;
}

Thành quả

Bài viết mới cập nhập

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  1 năm trước, 341 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  1 năm trước, 334 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

• 

  Hướng dẫn Plugin floating contact

  1 năm trước, 440 Lượt xem

  Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

• 

  ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

  1 năm trước, 448 Lượt xem

  Hôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…

• 

  Backup Yandex Mail

  2 năm trước, 286 Lượt xem

  Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…