JQuery :: Toggling Visibility Of Elements With Multiple Classes?
Sep 12, 2011
I've got a list of links and divs. When I click on a link I want to keep showing all the divs which have a class that matches the clicked link id and hide all the divs which don't. At the same time I want to add another class (.item) to the matching divs and remove it from any div which is hidden.
When I run the code below, clicking any of the links hides all the divs apart from the one which doesn't have a matching colour class.
$('a.filterclick').click(function(){
var id = $(this).attr('id');
if($('.filterclass').hasClass(id)) {$('.filterclass').removeClass('filteredout').addClass('item');
}else
[Code]....
View 2 Replies
ADVERTISEMENT
Mar 5, 2008
I have a page with a number of divs on it. The number of actual divs is variable and is database dependent. Each div has a sequential id, e.g.:
<div id = "id0">
<div>
<div id = "id1">
[code]....
Initially the first div's visibility is set to "display: block" and all the rest to "display:none". What I would like to be able to do is present the user with a series of links which when clicked would result in just one of the divs being displayed and the rest all hidden.
View 14 Replies
View Related
Feb 13, 2011
I finally figured out how to get the table rows to show and hide when its previous row is clicked (typical detail table setup). However, I can't get any animation to work properly.Using the toggle() method shows and hides the desired row but they just "snap" open and closed. When I use the slideToggle() method there is a slight delay in the hiding and showing.Adding some sort of animation parameter (slow, 400, etc) has no effect.
View 4 Replies
View Related
Apr 13, 2010
The default behaviour for a class selector is: "An element can have multiple classes; only one of them must match." Is there a class selector where you can use multiple classes and all of them have to match?
View 1 Replies
View Related
May 14, 2009
I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).
Here is the current code:
function archives(toggle) {
if (typeof(toggle) != "undefined") {
if (document.getElementById(toggle).style.display == 'none') {
document.getElementById(toggle).style.display = 'block';
[Code].....
This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.
View 3 Replies
View Related
Aug 5, 2010
I have a simple question regarding toggling large elements. When I use toggle to show/hide large elements I often get a "clunky" sort of effect. This is because the browser window has to re-size along with the page. I threw together a quick example of what I mean, it can be viewed HERE . You can sort of see it in the example if you scroll down before you hit the checkbox to hide the fieldset. This is even more noticeable the more elements that are displayed. Here is the simple code I threw together to illistrate the problem:
[Code]...
View 2 Replies
View Related
Sep 5, 2011
i am new at JS and jQuery and trying to make this code work. But i can't solve the problem. when u click on parent of nested list items.It hide the unordered list too. i tried to add siblings() method but still its not working like it should i.e parent of nested li should be visible to toggle its child again.
[Code]....
View 2 Replies
View Related
Sep 15, 2011
I have a page where I have images that may have visibility 'hidden' or 'visible'.
So how do I ensure I animate (and other 'manipulations') only visible images when mouseover them and not the hidden image?
Must mention I want to do this without any use of css classes or other non-jquery made css.
View 2 Replies
View Related
Apr 30, 2010
Right now I have something of the form in my CSS:
And in my HTML
How do I show all items belong to classes "a" and "b"? Right now I'm trying:
Is this the right approach, or should I be doing something else?
View 1 Replies
View Related
Dec 21, 2010
In my page I have pairs of divs like this:
Code HTML4Strict:
<div class="rounded red">
<p>Integer egestas neque vitae dui ultricies vel venenatis mi varius! </p>
</div>
[code]....
This works,in that it at least added the new class whereas the other solutions didn't. Unfortunately it counts EVERY div, not just the ones with the class .client, I can't set my array of desired classes, and I have no idea how to make it restart the count after it hits #4.
View 4 Replies
View Related
Apr 8, 2009
I have created a long list of items. For each item, there is 1 image. In my case, I use the same image each time.
I would like to use JS to allow users to check an item by clicking on it. Please note, I am not using radio buttons or any other forms.
This is my JS function:
It is triggered using this:
It works for each image. It switches to 2.png when a user clicks on each instance of that image. But how do you make sure it switches back to 1.png on the next click, and so on, effectively creating a switch for multiple instances of the same image?
View 2 Replies
View Related
Oct 1, 2009
I am using a Toggle function right now that does a getElementByID check. I have a table dynamically being built by ColdFusion that shows a bunch of time entries for a support ticket. Each time entry has 3 rows that I only want to show if the first row is clicked. Right now it only displays the first of the three.
Code:
<script language="JavaScript">
function toggle(divid) {
[code]....
View 2 Replies
View Related
Jun 16, 2009
How do you get the first element when the element got multiple classes?
View 6 Replies
View Related
Apr 17, 2011
I'm putting together an events calendar athttp:[URL].. Each event is a li item, and I use jQuery to assign the class "no-left-m" (no left margin) to li:nth-child(3n+1) for CSS layout purposes. I've also added the ability to show only events in certain categories. Unfortunately, the initial jQuery assigns the classes to li items from the DOM, and doesn't take into account the show/hide. This means that when I show only a single category, the margins are off.
[Code]...
how I can assign my classes dynamically to nth-child(3n+1) of *visible* items only?
View 1 Replies
View Related
Sep 7, 2011
It works fine when I give the paragraph a single class name, but when I attempt to create multiple class names the 2nd class name is not created.This is the (erroneous) markup that is created :<p class="class1" class2= "">test</p>How do I instead create (eg) <p class="class1 class2">test</p>.I know that multiple appends are not efficient but it is just a working example.
View 4 Replies
View Related
Feb 28, 2010
[code]I want to be able to highlight all of the divs which contain both the classes 'two' and 'three'. So the first and the third divs above are highlighted but the second isn't because it doesn't contiain both classes.I can see how to select multiple classes like this:$('.two, .three').css('background',''yellow');This selects items with either'two' or 'three' classes. I want it only to select the items with both classes.
View 1 Replies
View Related
Jan 14, 2012
I am using a JQuery ToolTip on all links with a title="" and it works great. I want to add another class to (.shadow) and it only seems to work with one class.
Here is the code to initialize:
BTW I am using noConflict b/c I am running other JQuery scripts on the page.
I have tried:
And also:
Also tried creating two scripts. One with var $tooltip1 and the other with var tooltip2.
So far nothing has worked.
View 1 Replies
View Related
Nov 9, 2010
adding my show and hide behavior across various classes, so the message shown will be unique to the class.
My J-Query looks like this;
<script type="text/javascript">
$(document).ready(function() {
$('#One').hide(); /
$('.col2').hover(
[Code]....
I have include a demo that should make it clearer, as to what I want to achieve. Ideally, each box will show a unique overlayed message as the user's mouse enters the box and hide once the mouse leaves.
View 2 Replies
View Related
May 21, 2010
I made this small piece of code, and I think I made it in a very drawn out way. I am sure there is a lot quicker way to do it. I want all divs to be cleared that are in a certain div. So when one link is clicked, the visible div is replaced with the new one (depending on the link)
Here is the code I have done...
$(document).ready(function(){
$(".untitled1link").click(function(){
$('.untitled1, .untitled2, .untitled3, .untitled4, .untitled5_1, .untitled5_2, .untitled5_3, .wall, .lightswitch, .detritus, .untitled6, .table, .socket, .socket2').hide();
$(".untitled1").fadeIn('5');
});
});
I just need a way to say clear all in that certain div, rather than having to name each class. I was thinking of giving each of those another class which is uniform across them all. But I don't think you can have two classes.
View 2 Replies
View Related
Jan 17, 2011
This can't be too hard, but I'm not seeing the answer. Elements on a web page may contain a class starting with "tr_". Sample HTML:I'm using the following to select matching elements: $('[class*=tr_]').each(function() So far so good. But now, I need to get the name of the class that starts with "tr_" from each matching element.
View 2 Replies
View Related
Sep 19, 2009
In order to allow users to filter content, I've created a small checkbox list. To each checkbox is attached an ID, and too some divs on the page are attached these id's too (in the class attr that is); one div can be attached to multiple id's, and so have multiple classes.
In order to show or hide my div's I wrote :
function couponsVisibles(){
$('.checkInteret').each(function(){
var coche = $(this).attr("checked");
if (coche) {
var idCoupons = $(this).attr("id");
$(".zoneCoupon , div[class='" +idCoupons+ "']").each(function(){
$(this).fadeIn();
});
}});
}
$(".checkInteret").click(function(){
var coche = $(this).attr("checked");
if (!coche) {
var idCoupons = $(this).attr("id");
$(".zoneCoupon , div[class='" +idCoupons+ "']").each(function(){
$(this).fadeOut();
});
}couponsVisibles();
});
It looks like my selector "$(".zoneCoupon , div[class='" +idCoupons+"']")" doesn't work, but I can't figure out why. I've started using the [attribute*=value] selector, but this selector doesn't seem to make a difference beetween class='8 10' and class='8 1'...
View 1 Replies
View Related
Apr 22, 2010
I'm using this bit of jQ to add a class to two different elements based on the class of another (parent/grandparent, etc) element.
First, when there's no class at all in <div id="main-content">, the 'active' class is added to *all* the #nav-primary LIs, and also to *all* the #aux-left DIVs; how can I modify this so that in the absence of any class on #main-content, do nothing?
Second, how can I target only the first or second of multiple classes to store in the 'containerClass' variable, e.g., <div id="main-content" class="apples bananas">?
View 2 Replies
View Related
Sep 1, 2009
$("span#tak_box").click(function() {
alert("hi");
});
[code]....
View 2 Replies
View Related
Mar 19, 2011
I have a jQuery script that changes the background color of odd rows in a table. If a row has class "new", though, it won't change it:
Code:
$(document).ready(function() {
$('tr[class!=new]:odd').css({'background-color':'#ddd'});
});
Is it possible to specify another class (together with "new") to which the script should not change the color? If yes, what's the syntax?
View 2 Replies
View Related
Apr 8, 2011
I'm trying to use a javascript class to assign specific event handlers to different elements. I create an object and pass it a reference to the element, and some properties for the event handler to use. When the event fires, I want the handler to reference the properties of the object. But I'm clearly doing something wrong as multiple instances all refer to the most recent object only.
View 1 Replies
View Related
Jun 15, 2010
The following works if the row that i want to display has one class. But if it has two classes this don't work.
For example this works
Code:
And this don't since it has two classes. How can i have two classes on a tag and still chose wich one i want to use when i want to show them or not??
Code:
Code:
View 2 Replies
View Related
