JQuery - Hide/Show with logic
<p>I am novice when it comes to JQuery. To put it simply, I have four divs, of class "portlet-topper". Each div has a sibling of the class "portlet-content". This content is hidden, until an instance of portlet-topper is clicked. Once it is clicked, it's sibling content is displayed. I use the following code: </p>

<pre><code>$(".portlet-topper").click(function(e){
    e.preventDefault();
    $(this).siblings(".portlet-content").toggle();
});
</code></pre>

<p>To clarify before a click:</p>

<p>|----portlet-topper-A----|</p>

<p>|----portlet-topper-B----|</p>

<p>After A is clicked:</p>

<p>|----portlet-topper-A----|</p>

<p>Portlet Content of A</p>

<p>|----portlet-topper-B----|</p>

<p>If I click B, the content of B displays, and A's is left displayed as well. If A has been clicked, I would like the clicking of B to display B while hiding A. How would I go about coding in this logic? I would need this to work for any number of divs, not just two. Essentially, allow only one set of portlet-content to be displayed at once. I figure I'd make explicit calls to show and hide, rather than toggle. Even still, I'm not really sure where to start...</p>

<p>Also, I am using Liferay, so I have little control over the class and id's of each div. I can only manipulate the css or the javascript</p>
