JSFiddle - React, Tailwind, and code Playground

by Konstanin_by

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
  <div id="filter_characteristic" class="filter_characteristic">
    
    <div class="characteristic__item_1">
      <div class="characteristic_name">
        <a href="#extra_fields-1" class="collapse-btn" data-target="#extra_fields-1" data-toggle="collapse" role="button">Объем</a>
      </div>
      <input type="hidden" name="extra_fields[1][]" value="0">
      <div id="#extra_fields-1" class="collapse">
        <input type="checkbox" name="extra_fields[1][]" value="20" onclick="document.jshop_filters.submit();"> 50 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="21" onclick="document.jshop_filters.submit();"> 75 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="22" onclick="document.jshop_filters.submit();"> 100 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="45" onclick="document.jshop_filters.submit();"> 130 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="46" onclick="document.jshop_filters.submit();"> 150 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="23" onclick="document.jshop_filters.submit();"> 200 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="24" onclick="document.jshop_filters.submit();"> 300 л<br>
        <input type="checkbox" name="extra_fields[1][]" value="35" onclick="document.jshop_filters.submit();"> 350 л<br>
        <input...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

jQuery(function ($) {
  $(document).ready(function(){
    

    $(".collapse-btn").click(function(){
			$(".collapse").collapse('toggle');
		});

  });
	
});