div内に1つの要素のみを隠す

Question

タイトルを隠すことなくフィルタセクション内のフォームを非表示にしたいと思います。

私は、formタグを追加しようとしました：

$(this).parents('.filter-section form').toggle("slideUp"); 

しかし、それは働いていません。ここで

はあなたが$(this).next('form').toggle("slideUp");を使用してそれを行うことができますfiddle

$('.filter-section .filter-toggle').click(function() { 
    $(this).parents('.filter-section').toggle("slideUp"); 
}); 

Answer 1

です：

更新JSFIDDLE。

$('.filter-section .filter-toggle').click(function() { 
 
    $(this).next('form').toggle("slideUp"); 
 
});

/*filter*/ 
 

 
.filter { 
 
    border-radius: 5px; 
 
    border: solid 1px #008db0; 
 
    padding: 20px; 
 
    background: #fff; 
 
} 
 
.filter-section { 
 
    border-bottom: solid #000 1px; 
 
    padding: 10px 0 10px 0; 
 
} 
 
.filter-title { 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
} 
 
.filter input[type=checkbox] { 
 
    margin-right: 8px; 
 
} 
 
.filter-section:last-child { 
 
    border-bottom: 0; 
 
} 
 
.filter-section:first-child { 
 
    padding: 0 0 10px 0; 
 
    margin-top: -10px; 
 
} 
 
.filter .rating span { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 70px; 
 
} 
 
.filter .rating span:before { 
 
    color: gold; 
 
    font-size: 23px; 
 
} 
 
.filter .badge { 
 
    background: #008db0; 
 
    padding: 2px 2px; 
 
    font-weight: normal; 
 
    font-size: 12px; 
 
    border: solid 2px #fff; 
 
    border-radius: 15px; 
 
    box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39); 
 
    margin: 0; 
 
} 
 
.filter-section form .badge { 
 
    background: #f87e47; 
 
    padding: 3px 1px; 
 
    margin-right: 6px; 
 
} 
 
.filter .more { 
 
    color: #000; 
 
    font-weight: normal; 
 
    font-size: 15px; 
 
    float: right; 
 
    margin: 12px 0 0; 
 
} 
 
#amount-min { 
 
    border: 0; 
 
    color: #f6931f; 
 
    font-weight: bold; 
 
} 
 
#amount-max { 
 
    border: 0; 
 
    color: #f6931f; 
 
    font-weight: bold; 
 
    text-align: right 
 
} 
 
.ranger input { 
 
    width: 78px; 
 
} 
 
.ranger { 
 
    display: flex; 
 
} 
 
.ui-slider-handle { 
 
    border-radius: 10px; 
 
    left: 60%; 
 
} 
 
.ui-slider-range { 
 
    background: #ff7400; 
 
} 
 
.filter-toggle { 
 
    cursor: pointer; 
 
} 
 
.filter-toggle:after { 
 
    float: right; 
 
    content: "\f107"; 
 
    font-family: 'FontAwesome'; 
 
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' /> 
 
<script src='https://use.fontawesome.com/0e9115ffee.js'></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script> 
 

 

 
<div class="row"> 
 
    <div class="col-md-2 filter"> 
 
    <div class="filter-section"> 
 
     <p class="filter-title">Etoiles</p> 
 
     <p class="rating rating-5star"><span></span> 
 
     </p> 
 
    </div> 
 

 
    <div class="filter-section"> 
 
     <p class="filter-title filter-toggle">Budget</p> 
 
     <form action="" class="form"> 
 
     <p class="ranger"> 
 
      <input type="text" id="amount-min" /> 
 
      <input type="text" id="amount-max" /> 
 
     </p> 
 

 
     <div id="slider-range"></div> 
 
     </form> 
 
    </div> 
 

 
    <div class="filter-section"> 
 
     <p class="filter-title filter-toggle">Arrangement</p> 
 
     <form id="arrangementfilter" action=""> 
 
     <input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br> 
 
     <input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br> 
 
     <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br> 
 
     <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br> 
 
     <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br> 
 
     </form> 
 
    </div> 
 
    <div class="filter-section"> 
 
     <p class="filter-title filter-toggle">Ville</p> 
 
     <form id="cityfilter" action=""> 
 
     <input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br> 
 
     <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br> 
 

 
     </form> 
 
     <a href="#" class="more">Plus des villes <span class="badge">13</span></a> 
 
    </div> 
 

 
    </div>