I am building a FAQ, behind every question there is a '+' icon, after clicking on it the answer appears and the icon changes to a '-' icon. The problem is that when you click on the next question the icon of the previous question doesn't toggle back to the original/previous/other icon.
See example:
https://codepen.io/pixelarchitect/pen/eXLEJV
HTML
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Javascript
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
I'm using jQuery and the free version of FontAwesome for this example.
Using a quite similar logic as your show/hide, you can restore all svg back to plus signs, except the clicked one... See below.
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
// This line turns all fa-minus into fa-plus except the clicked one
$('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus');
$(this).find('svg').toggleClass('fa-plus fa-minus');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
You can find all the font-awesome svgs and use .addClass("fa-plus").removeClass("fa-minus") - excluding the current div's parent:
$('.faq span').hide();
$('.faq div.question').click(function(e) {
e.preventDefault();
var div = $(this).parent();
var $this = div.find('span');
$(".faq span").not($this).hide();
$(".faq").not(div).find("svg")
.addClass("fa-plus")
.removeClass("fa-minus");
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Updated codepen: https://codepen.io/anon/pen/EMevMz
Related
In the following example I am trying to update the value of #viewer_campaign3 with new data and move the older values to other HTML elements. But I think what happens is that I end up overwriting the old data.
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br><a href="" id=viewer_campaign1>Hello Campaign1</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br><a href="" id=viewer_campaign2>Hello Campaign2</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br><a href="" id=viewer_campaign3>Hello Campaign3</a><p>
</div>
</div>
</div>
</div>
Any help is appreciated
In your .html() on $('#viewer_campaign1') and $('#viewer_campaign2'), you are not actually assigning the .html() value of each of the corresponding elements as intended.
So change this
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
To this
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
This will assign the values as you're intending. There were minor edits I made in the full code below, but these changes were all you needed to update appropriately.
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br>Hello Campaign1
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br>Hello Campaign2
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br>Hello Campaign3
<p>
</div>
</div>
</div>
</div>
<script>
window.addEventListener("contextmenu",function(event){
event.preventDefault();
var contextElement = document.getElementById("context-menu");
contextElement.style.top = event.offsetY + "px";
contextElement.style.left = event.offsetX + "px";
contextElement.classList.add("active");
});
window.addEventListener("click",function(){
document.getElementById("context-menu").classList.remove("active");
});
</script>
<body>
<div id="context-menu">
<div class="item">
<i class="fa fa-cut"></i> Cut
</div>
<div class="item" onclick="document.execCommand('copy');">
<i class="fa fa-clone"></i> Copy
</div>
<div class="item">
<i class="fa fa-paste"></i> Paste
</div>
<div class="item">
<i class="fa fa-trash-o"></i> Delete
</div>
<hr>
<div class="item" onclick="window.location.reload();"> **the reload command is working nice**
<i class="fa fa-refresh"></i> Reload
</div>
<div class="item">
<i class="fa fa-times"></i> Exit
</div>
</div>
can you help me with I just want the right click menu copy button to work and function i just want the copy command to work when i click on the copy button in the oncontext menu please help
I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}
because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?
I have an icon bar with a simple script to hide/show the content. If a tab is active the and the user clicks it again it will disappear and display nothing below the icon bar. Is there a way to have content displayed when no icons are active?
HTML and JS:
<div class="container text-center">
<div class="icon-bar">
<i class="fa fa-line-chart"></i>
<i class="fa fa-heartbeat"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-exchange"></i>
<i class="fa fa-newspaper-o"></i>
<script>
$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle(1);
$(".toggle:visible").not(myelement).hide();
});
</script>
</div>
</div>
example of what one of the <div>'s looks like.
<div id="box2" class="toggle" style="display: none;">
<p>content here</p>
</div>
How would I toggle this divs .pane-content without toggling another with same class?
HTML:
<div class="pane">
<div class="pane-header">Settings
<div class="pane-controls">
<span class="pane-toggle"><i class="fa fa-chevron-up"></i></span>
<i class="fa fa-times"></i>
</div>
<div style="clear:both;"></div>
</div>
<div class="pane-content">
Loreum Ipsum
</div>
</div>
JS:
$('.pane-toggle').click(function () {
$('.pane-content').toggle('fast');
$("i", this).toggleClass("fa-chevron-down fa-chevron-up");
});
Try -
$('.pane-content',$(this).closest('.pane')).toggle('fast');
Demo -----> http://jsfiddle.net/t5kM7/1/