Change background color and show/hide on same click - Javascript
<p>I am trying to create a plugin with the design below; when a date is clicked on the background color of the div changes to purple and the css triangle also changes to purple, and also the post with the event information for the clicked date appears (or comes to the top). By default there should be one of the date boxes which is purple at the start, and its event post should be visible also. Obviously I would like the other date boxes to return to their original color when another date box is clicked.</p>

<p>Here is the link to view the design: <a href="http://www.flickr.com/photos/54875551@N05/5662143061/in/photostream" rel="nofollow">http://www.flickr.com/photos/54875551@N05/5662143061/in/photostream</a>.</p>

<p>I have tried to use the following to create the background color change on click, but it is not working for the css triangle as well.</p>

<pre><code>var highlightLink = function () {
var active = null, colour = '#97558b';
    if (this.attachEvent) this.attachEvent('onunload', function () {
    active = null;
});
return function (element) {
    if ((active != element) &amp;&amp; element.style) {
    if (active) active.style.backgroundColor = '';
    element.style.backgroundColor = colour;
    active = element;
}
};
}();
</code></pre>

<p>and</p>

<pre><code> &lt;div id="datebox1" class="date" onclick="highlightLink(this);"&gt;                                    
    &lt;h1&gt;MAY&lt;/h1&gt;
    &lt;h1 class="num"&gt;14&lt;/h1&gt;                                          
    &lt;div class="date-tri" onclick="highlightLink(this);"&gt;&lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>So not only am I at a loss for how to add the css triangle into the onclick action, but I don't know how to coordinate that with the event posts (which are called seperately from the dateboxes in my php), like below:</p>

<pre><code>&lt;div id="event1" class="event"&gt;
    &lt;h2 class="eventtitle"&gt;Brainerd Spring Arts &amp;#038; Crafts Festival&lt;/h2&gt;
    &lt;div id="summary"&gt;
        &lt;p&gt;150+ artists/crafters with quality handmade items! 9:30-4 pm Brai High School. &lt;/p&gt;
    &lt;/div&gt;               
    &lt;div class="link"&gt;
        &lt;a href=""&gt;&lt;p&gt;http://www.excelsiorartonthelake.com&lt;/p&gt;&lt;/a&gt;
    &lt;/div&gt;                                              
&lt;/div&gt;
</code></pre>
