Nội dung

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

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

  • Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    2 ngày trước, 639 Lượt xem

    Cổng mặc định cho SSH trên hệ thống Linux là 22. Có một vài lý do khiến bạn có thể muốn thay đổi cổng này thành một số khác. Nếu nhiều máy…

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)