Reputation: 1144
I have created multiple form input fields that will feature a hidden pop up when the use click on the input field.
How it works :
When the user click on input field one the class is-displayed
is added the div parent protect-field-container
. When the user clicks on input field two the class is-displayed
is removed from element one and is added to element two.
I can't seem to get this function to work the way i want it to work. Below is a snippet of my code.
Jquery :
$('.popUp-block').on("click", function(){
var $popUp = $(this).closest('.protect-field-container')
if ($popUp.hasClass('is-displayed')) {
$popUp.toggleClass('is-displayed');
} else {
$popUp.addClass('is-displayed');
}
});
HTML :
<div class="field-container">
<div class="protect-field-container two-cols col-md-4">
<article class="protect-field planner-form">
<label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
<input type="text" class="characters popUp-block">
<i class="valid-checked fa fa-check-circle"></i>
<i class="invalid-checked fa fa-times-circle"></i>
</article>
<div class="protect-popup">
<h3>Permanent Total and Partial Disability</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a href="#">More information</a>
<span>€ 100,000 - € 50,000</span>
</div>
</div>
</div>
Upvotes: 1
Views: 74
Reputation: 67525
You don't have to use toggle in this case, you could just remove class is-displayed
from all the containers when the user click and add it to the current clicked field container, e.g :
$('.popUp-block').on("click",function() {
//Remove class from all the containers
$('.protect-field-container').removeClass('is-displayed');
//Add class to the current clicked container
$(this).closest('.protect-field-container').addClass('is-displayed');
});
Or you could make it just by using show/hide
functions, check example bellow.
Hope this helps.
$('.protect-popup').hide();
$('.popUp-block').on("click",function() {
$('.protect-popup').hide();
$(this).closest('.protect-field-container').find('.protect-popup').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-container">
<div class="protect-field-container two-cols col-md-4">
<article class="protect-field planner-form">
<label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
<input type="text" class="characters popUp-block">
<i class="valid-checked fa fa-check-circle"></i>
<i class="invalid-checked fa fa-times-circle"></i>
</article>
<div class="protect-popup">
<h3>Permanent Total and Partial Disability</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a href="#">More information</a>
<span>€ 100,000 - € 50,000</span>
</div>
</div>
<div class="protect-field-container two-cols col-md-4">
<article class="protect-field planner-form">
<label for="#">How many childern do have ? <i class="fa fa-question-circle"></i></label>
<input type="text" name="" class="characters popUp-block">
<i class="valid-checked fa fa-check-circle"></i>
<i class="invalid-checked fa fa-times-circle"></i>
</article>
<div class="protect-popup">
<h3>Permanent Total and Partial Disability</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a href="#">More information</a>
<span>€ 100,000 - € 50,000</span>
</div>
</div>
<div class="protect-field-container two-cols col-md-4">
<article class="protect-field planner-form">
<label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label>
<input type="text" class="characters popUp-block">
<i class="valid-checked fa fa-check-circle"></i>
<i class="invalid-checked fa fa-times-circle"></i>
</article>
<div class="protect-popup">
<h3>Permanent Total and Partial Disability</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a href="#">More information</a>
<span>€ 100,000 - € 50,000</span>
</div>
</div>
</div>
Upvotes: 4