How to use javascript to trigger a css event for a collection of elements that have the same class/name


Tags: javascript,css,events

Problem :

says it all really in the title I have this javascript

<script>          
$(".tile").click(function(e){
 $(this).toggleClass("flipOutX")  ; 
})
</script> 

I have some html dfined boxes called "tile" and the problem here is that when i click an individual tile the flipoutx function works but only the tile I have clicked....

How can I make this work for all my tiles that are all called "tile" and not just the one tile I have clicked ?



Solution :

Try ...

$(".tile").click(function(e) {
  $(".tile").toggleClass("flipOutX"); 
});

The change of the $(this) (single tile) to $(".tile") (collection of elements) is what allows for all tiles to move when one is clicked.

Simple change in what you are referencing. Instead of referencing the .tile clicked with this, you need to reference the tile(s).


    CSS Howto..

    How to make URL change upon clicking through AJAX loaded menu?

    How to add box-shadow to a CSS div with display:table-row? [duplicate]

    How do I make cards of different heights fill gap in css? [duplicate]

    Images don't show up in quiz results after start over button

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    jquery hide and show for printing

    How to exclude an HTML element form Ionic CSS

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    How to layer a
    element ontop of a other elements

    Show notification counter with bootstrap

    How to draw a guitar string using css?

    how to invoke css file in jquery

    how to apply ellipse effect in which contain space in string?

    Javascript: how to check/delete a css style tag in the head of the document

    jQuery: How to animate height change without known heights?

    How To Create A Responsive Horizontal Layout Using CSS?

    How can a site Use Javascript and NOT display any structural HTML in the browser?

      list only showing contents of first
    • , ignoring second

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    JS+CSS How to display images from an array from top right to bottom left

    CSS: How to make consecutive lines in Paragraph Go over Left Floated Image with height

    How to style a SVG using CSS in javaFX FXML

    How to trigger a css animated button by hovering over an image on the same page

    How do i place 4 headers from 1 div next to each other?

    How to remove line break after DIV in CSS

    How to use HTML/CSS to show images and titles inline?

    jQuery wait for show()? Getting wrong data

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How can I override an inline CSS rule using an external file?

    How to make circle thing in CSS? [duplicate]