Question

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:

$(".portlet-topper").click(function(e){
    e.preventDefault();
    $(this).siblings(".portlet-content").toggle();
});

To clarify before a click:

|—-portlet-topper-A—-|

|—-portlet-topper-B—-|

After A is clicked:

|—-portlet-topper-A—-|

Portlet Content of A

|—-portlet-topper-B—-|

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…

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

Answer 1

I think you need to do this:

$(".portlet-topper").click(function(e){ 
    e.preventDefault();
    $(".portlet-content").hide();
    $(this).siblings(".portlet-content").toggle(); 
});

Otherwise, you would never be hiding your contents.