Question

Slap me if I am going about this wrong, I am quite the beginner.

Here is my setup, which is very similar visually to Outlook’s UI I guess.

Left pane (floating div) contains a list of containers you can click on (like emails). Right hand pane contains a set of non-visible containers that should become visible when their class is changed to a different css class.

I’m trying to set it up where if you click on the element in the left pane, it then performs an onclick javascript action (stored in an external .js file) that toggles the right div’s class value between two css classes.

The onclick in the left pane div passes $_row[‘uniqueID’] to the function. That is the uniquely incremented column name. It is also the ID value of the right pane ‘s.

Putting this altogether, can someone direct me on how to do this?

left pane…

<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \">

right pane…

<div id=".$row['uniqueIdentifier']," class=\"mL\">

css…

div.mL {display:none;}
div.mL.active {display:block;}

Answer 1

function toggleMenu(div){
    $('#'+div).addClass('active');
}

jQuery has .addClass() and .removeClass() methods.

I think that’s what you’re after, let me know if not.