Toggle .html text on click with jQuery - javascript

Im trying to build a collase expand function on my website.
I have the following that toggle ths hidden div only im trying to change the 'Expand' text to collapse, and then if clicked again, collapse > expand.
Can anybvody see what im doing wrong?
$('.coverage .expand').click(function(){
$(this).parent().parent().find('.subitems').toggle('slow', function() {
var togtit = $(this).parent().find('.expand');
if((togtit).is('Expand')){
togtit.html('Collapse')
} else {
togtit.html('Expand')
}
});
});

The problem is that you use .is() method in wrong way. You may try the following instead:
$(this).parent().find(".expand").html(function(i, html) {
return html === "Expand" ? "Collapse" : "Expand";
});

if(togtit.html() == 'Expand'){
togtit.html('Collapse')
} else {
togtit.html('Expand')
}
Above should work.
Check the current matched set of elements against a selector, element,
or jQuery object and return true if at least one of these elements
matches the given arguments.
jQuery.is should be used to check if element matches selector. It will not test inner content of an element.

Related

toggle div to show hide

I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});
You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});
you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.
you are sure you need "==" to set the value? or one "="
Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

if any div has Class through alert

So i have this jQuery function that checks if a particular div has the "red" class attached to it. However i want to know how i can make it so that it checks mutliple Divs not just the "#Drop1" div.
I have 4 Divs in total from #Drop1 all the way to #Drop4.
I want to get it working so that it checks all 4 Divs for the class "red" and if any div has this class show the alert message.
I've looked around and can't seem to find a concrete answer.
$("Button").click(function(){
if ( $("#Drop1").hasClass("red") ) {
alert("one of your Divs has the class red");
}
});
Since each of the element's id attributes start with 'Drop', you could use the attribute selector [id^='Drop']:
$("button").click(function(){
if ($("[id^='Drop']").hasClass("red")) {
// ...
}
});
Or you could just combine the attribtue selector with a class selector and check the .length property:
$("button").click(function(){
if ($("[id^='Drop'].red").length) {
// ...
}
});
Is there some reason why directly selecting on the class: $( "div.red" ).each(...) isn't going to work?

How to build a jQuery-powered switcher to add/remove css attributes?

I'm trying to build a box container that expands when clicking in a "read more" button and collapse to the initial size when clicking in the same button (now a "collapse" button).
In the DOM I have a .leer-mas button inside a .post container. And the following jQuery code:
//When link with class .leer-mas is clicked, get the parent element's id and add some css attributes
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
item.css('height', 'auto');
$(this).addClass('leer-menos');
$(this).text('Leer menos');
});
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$('.leer-mas.leer-menos').click(function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})
The first action works like a charm. But the second action does nothing... And I think I'm missing some fundamentals of jQuery, as the syntax is identical and maybe that is not the way it should be :)
Any ideas? Thanks.
Edit - I had a few errors on my code. Though I'm still trying to get it with a single switcher, I have a working version.
New DOM looks like this:
<div class="post">
<div class="leer mas">
</div>
<div class="leer menos">
</div>
</div>
The code now looks like this:
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.mas').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.css('height', 'auto');
$(this).hide();
$(this).next('.leer.menos').show();
});
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.menos').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.removeAttr('style');
$(this).hide();
$(this).prev('.leer.mas').show();
});
This works smoothly. But If I get it working with the intended structure of the original question (with a single button), i would be happier :)
it is because the class leer-menos is added dynamically... so when the event registration code is executed there is no element with classes leer-mas and leer-menos.
A possible solution is to use event delegation
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$(document).on('click', '.leer-mas.leer-menos', function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})
You're trying to use .removeAttr() to remove a CSS Property within the attribute "Style". This is incorrect, try using item.removeAttr('style');
Not exactly what you asked for, but you can draw ideas from this:
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
// toggle "height" between 'auto' and null
item.css('height', item.css('height') == 'auto' ? null : 'auto' );
// toggle class 'leer-menos'
$(this).toggleClass('leer-menos');
// toggle text between 'Leer menos' and ''
$(this).text( $(this).is('.leer-menos') ? 'Leer menos' : '' );
});

Check if DIV is visible using javascript

i needed to hide a div on my code behind:
bool hideDiv = false
//codes to change hideDiv
myDiv.visible = hideDiv;
and i want to check visibility of my div using javascript:
if (jQuery("myDiv") != null){
//some codes
}
else{
//some codes
}
and the 'jQuery("myDiv")' is always not null (even if the div was actually not visible), what is the better way to check if a div is visible?
You can use :visible selector inside is filtering function:
if ($('#myDiv').is(':visible'))
Notes:
You probably forgot the # before the id in your selector(jQuery("myDiv")).
jQuery will never return null no matter if the searched elements exist or not, unlike document.getElementById

How to click and pick div elements in jQuery

Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.
So my first question:
http://jsfiddle.net/5pZ2v/3/
How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?
Maybe there already exists a function for this or plugin?
Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button
Use something like this:
$('div.profile').click(function(){
$(this).toggleClass('selected');
});
Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:
http://jsfiddle.net/Paulpro/apvqM/
Did you try .toggleClass()?
i.e. create a css class highlight and add
$("div").click(function () {
$(this).toggleClass("highlight");
});
HTH
Ivo Stoykov
PS: Look documentation here
You can use the click function of jQuery to mark/unmark a div.
$("div.profile").click(function () {
// if it's unmarked we mark
if(!$(this).hasClass('selected'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
You can then use each to get all the marked div :
$("div.selected").each(function () {
// do what you want
});
For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)
http://jsfiddle.net/vol7ron/5pZ2v/8/
First you need to give your DIVs an ID then look at my Fiddle.
$("div").click(function () {
$(this).toggleClass("highlight");
});
$('#save-button').click(function(){
$('#output').html(''); // clear the output div
// Loop through each selected div and output it's ID
$('div.highlight').each(function(){
$('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});

Categories