Nội dung

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

3 năm trước, Code theme wordpress, 258 Lượt xem

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

  • Thiết kế web trọn gói từ 3 triệu

    Thiết kế web trọn gói từ 3 triệu

    11 giờ trước, 8 Lượt xem

    Thiết kế web trọn gói giá rẻ: một giải pháp hấp dẫn cho doanh nghiệp nhỏ Trong một thế giới của công nghệ và internet,…

  • Quản lý mẫu web phòng khám

    Quản lý mẫu web phòng khám

    7 tháng trước, 273 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    10 tháng trước, 221 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)