>Hoping someone can assist as I am unsure as to what I am doing wrong.
>I currently have two divs on the same page that are using the same div
>id, i.e "side_menu_sys".
>
>I have a button on the screen that calls the toggle method which will
>either fadeOut or fadeIn the abovementioned div, i.e:
>
> jQuery().ready(function() {
> jQuery(".fader").toggle(
> function(){
> jQuery("#side_menu_sys").fadeOut("slow");
> },
> function(){
> jQuery("#side_menu_sys").fadeIn("slow");
> }
> );
> });
>
>Unfortunately, when I press on the button to toggle the fadeOut /
>fadeIn, it only performs this for the first div only and not the
>second div.
>
>I assumed it would've applied it to both divs as they are both using
>the same id name.
Each element *must* have a unique id--this is per the W3C spec. Since you're
assigning multiple elements with the same id, only the first element with
that id in the DOM will actually be accessed.
If you want to be able to assign that identifier to multiple elements, make
it a class instead of an id.
-Dan