I'm helping my friend Michaela out for our web design class. She did the HTML, and I've changed just a few of the lines and added some divs. She wants it so if the user clicks on a radio button then the corresponding div is shown. All div's for her form start out hidden in a class "hidden_destiny". -- This going to be a series of nested div's and I may need to change the layout later.
Here's the JsFiddle.
Here's my javascript:
if ($('#radio_starwars').is(':checked')){
$('#clicked_starwars').hide().slideDown('slow');
$('.hidden_destiny').not('#clicked_starwars').hide().slideUp('slow');
}
else if ($('#radio_avengers').attr('checked', 'true')){}
else if ($('#radio_batman').attr('checked', 'true')){}
else if ($('#radio_xmen').attr('checked', 'true')){}
else if ($('#radio_harryp').attr('checked', 'true')){}
else if ($('#radio_lotr').attr('checked', 'true')){}
[EDIT] Updated code. Add id identifier to code and updated JsFiddle link.
Try this code:
$(":radio").change(function(){
$(".hidden_destiny").hide()//hide divs
$("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})
http://jsfiddle.net/YZ9fh/
$('.fate').click(function () {
$('.hidden_destiny').each(function () {
if ($(this).is(':visible')) {
$(this).slideUp('slow');
}
});
var id = $(this).val();
$('#clicked_' + id).slideDown('slow');
});
jsfiddle
Related
I am making a new website. As is what I'm doing is a gallery of videos by clicking shows me a video in modal, in total only shows me 1 large video with text and small 3 videos below where you can display more items. I need you to click show me more out a new row with 3 computer elements by al-md-4 columns. This step I have done but I have 2 problems:
Default with Javascript shows me 2 rows instead of just one, will define in the JS 1 and showing me appear 2
I also wish there was another button to "hide" and was hiding whenever I click a row.
Then I attached the complete code to where I could do.
http://www.bootply.com/vLeA1VQoYF
Need help!!
Thank you so much! Greetings from Spain
Here is my fiddle
And JS:
$('.mydata:gt(0)').hide().last().after(
$('<a />').attr('href','#').attr('id','btn_less').text('Show less').click(function(){
var a = this;
$('.mydata:visible:gt(0)').last().fadeOut(function(){
if ($('.mydata:visible:gt(0)').length == 0) {
$(a).hide();
} else if($("#btn_more:not(:visible)")){
$("#btn_more").show();
}
});
return false;
})
).after($('<span />').text(' ')
).after(
$('<a />').attr('href','#').attr('id','btn_more').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(1)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) {
$(a).hide();
} else if($("#btn_less:not(:visible)")){
$("#btn_less").show();
}
}); return false;
}));
Tell me if I misunderstood you and you need something else.
I need help with this JS code for my wordpress theme.
First part is when it looks for h4 heading and if it has certain text it wraps all paragraphs below this h4 into div (which hides all paragraphs into fading section) and adds "button" (which is span):
var tutustu = 'TUTUSTU';
var syvenny = 'SYVENNY';
$('.article_content h4').each(function(){
if($(this).text() == tutustu)
{
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
else if($(this).text() == syvenny) {
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
});
Second is when user clicks on "button" div (that we wrapped into all paragraphs early) will get another class (to basicaly reveal all the paragraphs) and remover button:
$('span#expand').click(function() {
$(this).parent('.expand').removeClass('expand').addClass('expanded');
$(this).remove();
});
What I need is after paragraph text is revealed I want to have button to click on and everything goes back like in 1st part.
I came up with something like this:
$('span#expanded').click(function() {
$(this).parent('.expanded').removeClass('expanded').addClass('expand');
});
But it doesn't work (
Help is much appreciated
Use event Delegation and .toggleClass() instead of .addClass() and .removeClass()
$(document).on("click" , "span#expanded" , function() {
$(this).parent().toggleClass('expanded expand');
});
$('#expanded').on('click', function(e) {
$(this).parent().toggleClass('expanded expand');
e.preventDefault();
});
--EDIT--
I have the toggle Button with which slides left and right. The toggle and animation are working fine, but the problem comes when adding more than one instance of toggle button on the same page. When I click on a toggle button, All the toggle buttons are using the same VAR. So if you open one and then click another one, the second one doesn't slide open because it thinks is suppose to close. Where would you put the isChecked var so that it is different for each instance?
js fiddle
http://jsfiddle.net/amQCN/11/
$(document).ready(function() {
var isChecked = false;
$('.toggle-radio-switch').click(function() {
if (isChecked == true) {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
isChecked = false;
console.log("isChecked = " + isChecked);
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
isChecked = true;
console.log("isChecked = " + isChecked);
};
});
});
radio-switch-slider is positioned on top of the contents and slides back and forth revealing yes or no
<div class="toggle-radio-switch" id="toggle3">
<span>yes</span>
<span>no</span>
<div class="radio-switch-slider"></div>
</div>
Working version incase anyone is wondering:
Ended up just using this instead
$('.toggle-radio-switch').click(function() {
if ($(this).find('.radio-switch-slider').css('margin-left')=="0px"){
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
}
});
I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')...
Hoping someone could help me with a bit of jquery or javascript. I have some DIV's that contain the values of a checkbox being either "1" or "0" depending on whether I check the box or not:
<div class="checkbox">1</div> //This is when the checkbox is checked
<div class="checkbox">0</div> //This is when the checkbox is NOT checked
The class for this DIV stays the same whether it is a 0 or a 1 so I need to have a conditional statement that says,
"If the contents of the DIV is 1 then show it"
AND
"If the contents of the DIV is 0, then hide it"
Would this be simple to do?
A filter would come in handy for such case..
$('.checkbox').filter(function () {
return $(this).text() == 0;
}).hide();
I would do it differently.
$("input#checkbox").change(function(){
$("div.checkbox").toggle(this.checked);
});
Considering that your checkbox is the one that it is altering the content of the <div> anyways.
Any time a checkbox is changed, look at your divs with class checkbox and if they have 1, show, else hide.
$('input[type="checkbox"]').on('change', function() {
$('.checkbox').each(function(){
if($(this).text() === '1'){
$(this).show();
}else{
$(this).hide();
}
});
});
If i have to do it then i would love to do in this way: http://jsfiddle.net/P2WmG/
var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
$('#checkbox').hide();
} else {
$('#checkbox').show();
}
You can use the :contains() Selector to select the divs based on their contents.
$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();
I've got a list of items which can be expanded/collapsed individually or all at once with an Expand All/Collapse All button.
All the items start collapsed, but if you manually expand item so that every item is expanded, the 'Expand All' button should change to 'Collapse All'. Similarly if you collapse all the items it should change to 'Expand All'.
So every time you click on an individual line, it should check to see if ALL the items have now been collapsed/expanded, and if so, update the Expand/Collapse All button.
My problem is that I'm not sure how to iterate over all the items on a click to see if they are collapsed or not and properly update.
Here is a JSFiddle for this: JSFiddle
Here is my current code:
var expand = true;
jQuery.noConflict();
jQuery(function() {
jQuery('[id^=parentrow]')
.attr("title", "Click to expand/collapse")
.click(function() {
jQuery(this).siblings('#childrow-' + this.id).toggle();
jQuery(this).toggleClass("expanded collapsed");
ExpandCollapseCheck();
});
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).hide();
if (jQuery(this).siblings('#childrow-' + this.id).length == 0)
jQuery(this).find('.expand-collapse-control').text('\u00A0');
});
jQuery('#childrow-' + this.id).hide("slide", { direction: "up" }, 1000).children('td');
});
function CollapseItems() {
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).hide();
if (!jQuery(this).hasClass('expanded collapsed'))
jQuery(this).addClass("expanded collapsed");
});
}
function ExpandItems() {
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).show();
if (jQuery(this).hasClass('expanded collapsed'))
jQuery(this).removeClass("expanded collapsed");
});
}
function ExpandCollapseChildren() {
if (!expand) {
CollapseItems();
jQuery('.expander').html('Expand All');
}
else {
ExpandItems();
jQuery('.expander').html('Collapse All');
}
expand = !expand;
return false;
}
function ExpandCollapseCheck() {
if ((jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (expand)) {
jQuery('.expander').html('Expand All');
CollapseItems();
expand = !expand;
}
else if ((!jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (!expand)) {
jQuery('.expander').html('Collapse All');
ExpandItems();
expand = !expand;
}
}
A couple of things I see with your code.
It seems that you may have multiple children with the same ID, such as #childrow-parent0. This is not legal HTML, and can lead to problems with JavaScript. Use classes instead.
Manipulating ID's to find children is more difficult than using built-in jQuery selectors to find children. I realize that in this case, they are siblings rather than true children, but you can still use .nextUntil(".parent") to find all of the "children" of a parent.
Use your click handlers to do the expanding/collapsing instead of repeating code. One you have a click handler, you can call .click() on a parent, and it will toggle as if you clicked it.
If half of your elements are collapsed, do you want "Expand All" or "Collapse All"? You might want both.
With all of that in mind, I wrote your code with a lot less lines. To answer your specific question, I just compared the number of '.parent.expanded' elements to the number of '.parent' elements to see if they were all expanded or not. (I changed to using a single .parent class.)
Demo
The relevant code to your question:
$('#expand_all').toggleClass("disabled", $('.parent.expanded').length == $('.parent').length);
$('#collapse_all').toggleClass("disabled", $('.parent.collapsed').length == $('.parent').length);
This uses toggleClass(), with the second argument returning true/false depending on the number of collapsed/expanded parents. This is used by toggleClass to determine whether the disabled class is applied.
Don't bother iterating, just use a selector to get a count of all the elements & their classes:
var $all = jQuery('selector to return all lines');
if($all.length == $all.filter('.collapsed').length)
//all the rows are collapsed
if($all.end().length == $all.filter('.expanded').length)
//all the rows are expanded