Nội dung

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

6 năm trước, Code theme wordpress, 463 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

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

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, ,

Đ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)