I have a page with multiple web-parts. I have four buttons in a web-part:
<div id="buttons">
<div class="gmcButton" id="About GMC">About GMC</div>
<div class="gmcButton" id="Key Features">Key Features & Changes</div>
<div class="gmcButton" id="Implementation And Rollout">GMC Implementation<br/>and Rollout</div>
<div class="gmcButton" id="GMC Resources">GMC Resources<br/></div>
</div>
In a second web-part zone there are four list view web parts. On page load, I have a JQuery function that loops through the four web-parts and hides all but the default web-part.
function loadPanels() {
$('.js-webpart-titleCell').each(function (j) {
var title = $(this).find('h2.ms-webpart-titleText').text();
if(title!="About GMC") {
$(this).parent().parent().parent().addClass("hidden");
}
});
}
This works. All but the default "About GMC" web part hide. What happens though when I click the buttons on the page is that the title of the web part changes to the appropriate title, but the contents of the web part do not change.
If I examine the CSS in the DOM explorer, the entire web part has the correct class applied, but it is not changing the display from the default web part content.
What am I doing wrong?
edit: the code for hiding/showing the web parts on the button click. The action is the same, add or remove class. When I examine the page in the DOM explorer, I see the class addded to the appropriate web parts, but the behavior isn't changing for the contents of the web part (only the titles of the web parts change, but the content still shows the default web part content):
$(".gmcButton").click(function() {
var btnName = $(this).attr("id");
$('.js-webpart-titleCell').each(function (j) {
var title = $(this).find('h2.ms-webpart-titleText').text();
if(title!=btnName) {
$(this).parent().parent().parent().addClass("hidden");
}
else {
$(this).parent().parent().parent().removeClass("hidden");
}
});
});