I want to select the right item which is clicked with each, i have wrote this javascript code it doesn't work when i click on the item it does nothing :
jQuery('.kspoiler').each(function() {
jQuery('.kspoiler').click(function() {
if ( !jQuery('.kspoiler-content').is(':visible') ) {
jQuery(this).find('.kspoiler-content').show();
jQuery(this).find('.kspoiler-expand').hide();
jQuery(this).find('.kspoiler-hide').show();
} else {
jQuery(this).find('.kspoiler-content').hide();
jQuery(this).find('.kspoiler-expand').show();
jQuery(this).find('.kspoiler-hide').hide();
}
});
});
My HTML code is the following :
<div class="kspoiler">
<div class="kspoiler-header">
<span class="kspoiler-title">
Warning: Spoiler! </span>
<span class="kspoiler-expand">
[ Click to expand ] </span>
<span style="display:none" class="kspoiler-hide">
[ Click to hide ] </span>
</div>
<div class="kspoiler-wrapper"><div style="display:none" class="kspoiler-content">
my content </div>
</div>
</div>
It can be in the page more than on HTML code showed below, my javascript showed below doesn't work. Do-you have any idea how to make it working ?
Thanks by advance
I think you don't have to use each anymore, since the event listener already gets attached to all the elements with class .kspoiler so you don't have to iterate over them anymore. And also, better use the jQuery alias, $ (unless you have other libraries which might be using the $).
$('.kspoiler').click(function() {
// click event handler
// $(this) refers to the clicked element
});
You can't write !jQuery('.kspoiler-content').is(':visible') - it's select nothing. Also don't need to use $(each) function
$('.kspoiler').click(function() {
if ($(this).is(':hidden')) {
$(this).find('.kspoiler-content').show();
$(this).find('.kspoiler-expand').hide();
$(this).find('.kspoiler-hide').show();
} else {
$(this).find('.kspoiler-content').hide();
$(this).find('.kspoiler-expand').show();
$(this).find('.kspoiler-hide').hide();
}
});
You add a trigger for ALL item, each time they are...
// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
// Add a trigger for all '.kspoiler'
jQuery('.kspoiler').click(function() {
/***/
});
});
Try to remove your useless loop :
// Add a trigger for all
jQuery('.kspoiler').click(function() {
/***/
});
(With a loop you need to do :)
// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
// Add a trigger for this one
jQuery(this).click(function() {
/***/
});
});
And it's the same think for you condition, you need to select the '.kspoiler-content' on the current clicked :
if(jQuery(this).find('.kspoiler-content').is(':hidden') ))
Related
var fredclicknumber=0;
$(".fredinbed").click(function(){
if(fredclicknumber==0) {
$(".fredtext").addClass("txtbxin")
$(".fredtext").removeClass("txtbxout")
}
else if (fredclicknumber==1){
$(".fredtext").addClass("txtbxout")
$(".fredtext").removeClass("txtbxin")
}
++fredclicknumber;//
})
if(fredclicknumber > 1){
fredclicknumber=0;
}
Im trying to create a text box that will appear if you click the item, and disappear when clicked again, however with the code shown,It only goes through this process once, what I want to do is somehow loop this code so you can make the text box appear and disappear any number of times.
Since you are just toggling between class , you can use toggleclass instead of creating a variable
$(".fredinbed").click(function() {
$(".fredtext").toggleClass("txtbxout")
})
.txtbxin {
color: green
}
.txtbxout {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='fredinbed'>Toggle</button>
<span class='fredtext txtbxin'>Toggle class </span>
You can use toggleClass jQuery funtion instead of checking and changing variable values.
$(".fredinbed").click(function(){
$(".fredtext").toggleClass("txtbxin");
$(".fredtext").toggleClass("txtbxout");
});
So, if class already assign to element than toggleClass will remove it, otherwise it will add class.
Use .toggleClass('is-show')
https://api.jquery.com/toggleclass/
It will look like this
$(".fredinbed").click(function(){
$(".fredtext").addClass("is-show")
})
I’m trying to make a power off button (actually it is a div), that when I click, it will change its appearance.
It looks like an interruptor, so I want to change the background-color of the page, the color of the icon ‘power off’ and the border-style of the button.
I took this function from another site and it is doing well in adding once a CSS property, but I want it to go on and of always.
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
// this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.remove('on');
}
});
I believe the logic will be something like
x = x - 1
where x need to go turning from 0 to 1 and from 1 to 0, every time I click the button.
<body>
<div class="interruptor">
<div id="io" class="poweroff">
<i class="fa fa-power-off"></i>
</div>
</div>
<script src="https://use.fontawesome.com/ddde7c70b6.js"></script>
<script src="/js/logic.js" charset="utf-8"> </script>
</body>
Since you are checking on the basis of powerOff class you need to toggle it also like this
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.add('poweroff');
this.classList.remove('on');
}
});
Instead of checking if condition and adding and removing classes, use toggle like this
Read Here about toggle
document.getElementById('io').addEventListener('click', function () {
this.classList.toggle('on');
});
You should use toggle instead of add and remove, as :
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.toggle('poweroff');
this.classList.toggle('on');
} else {
this.classList.toggle('on');
}
});
This way it will automatically add and remove class on button click.
I have the following code that I use to hide/show a div using a drop-down. If the Value of the drop-down is 1, I show the div, otherwise I hide it.
var pattern = jQuery('#pattern');
var select = pattern.value;
pattern.change(function () {
if ($(this).val() == '1') {
$('#hours').show();
}
else $('hours').hide();
});
The select drop down retrieves its value from the database using form model binding:
<div class="form-group">
<label for="pattern" class="col-sm-5 control-label">Pattern <span class="required">*</span></label>
<div class="col-sm-6">
{{Form::select('pattern',['0'=> 'Pattern 0','1'=> 'Pattern 1'],null,
['id'=>'pattern','class' => 'select-block-level chzn-select'])}}
</div>
</div>
This select drop-down then hides or shows the following div:
<div id="hours" style="border-radius:15px;border: dotted;" >
<p>Example text</p>
</div>
The problem:
The div won't be hidden if the pattern stored in the database is set to 0. I have to manually select "Pattern 0" from the drop down to change it. I know that is due to the .change() method. But how do I make it hide/show on page load?
Usually in such case I store the anonymous function reference as below:
var checkPattern = function () {
if ($('#pattern').val() == '1') {
$('#hours').show();
}
else $('#hours').hide();
}
It makes the code ready to use in more then one place.
Now your issue could be resolve in a more elegant way:
$(document).ready(function(){
// add event handler
$('#pattern').on('change', checkPattern);
// call to adjust div
checkPattern();
});
Well, if the element "should" be visible by default, you just then have to check condition to "hide it" (you don't have to SHOW an element that is already visible...) :
if(pattern.value != %WHATEVER%) { $('#hours').toggle(); }
Then, to switch display on event or condition or whatever :
pattern.change(function(evt){
$('#hours').toggle();
});
Not sure that your event will work. I'd try something like
$(document).on(..., function(evt){
//behaviour
});
http://api.jquery.com/toggle/
https://learn.jquery.com/events/handling-events/
I've got this code
$(".test_init").click( function(){
var win = $(this).next(".test_wrap").find(".test_drop");
if ($(win).html().length)
$(win).empty().hide("fast");
else {
$(win).load("URL");
}
});
Which returns me some html form without close button
I wish to add close button using such method without adding it in every-single function
$('*[class*="_drop"]').change(function() {
$(this).append($('<a />', {
class: 'close-drop',
click: function(e) {
e.preventDefault();
alert("test");
}})
);
});
But nothing happens - i can't understand why close button doesn't appends
<div class="test_wrap relative">
<div class="test_drop absolute"></div>
</div>
Example: http://jsfiddle.net/fppfyey7/10/
Your problem is with your CSS, not with your JS. The button is appended but you are hidding it with your style.
For example in this fiddle I append a button with your JS code and your CSS:
Fiddle 1
Now, in this one, I just remove your absolute and relative classes:
Fiddle 2
My solution (isn't good enough, still works)
$('*[class*="_drop"]').ajaxStop(function() {
$(this).prepend('<a onclick="$(this).parent().empty().hide(\'fast\');" class="close-drop"></a>');
});
If here will be better solution, will mark it as answear!
What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.
Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)
Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo
I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo