My webpage features a vertical list of items on the left side, contained within a <ul id="project_menu"> element. Whenever a user clicks on one of these items, a div called project-details is supposed to slowly fade in on the right side of the screen to display additional information. However, I encountered an issue where multiple divs are appearing simultaneously despite my efforts to ensure only one is displayed at a time.
Below are the key files involved:
<div class="project">
<ul id="project_menu" class="project_menu">
<li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
<li id="menu-nodejs" data-projectID="node-project">NodeJS</li>
<!-- more code -->
</ul>
<div class="project-detail">
<div id="php-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
<!-- data about project -->
</div>
<div id="node-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
<!-- data about project -->
</div>
<!-- and so on.. -->
#php-project {
background-color: #9b59b6;
margin: 30px;
display: none;
}
$(document).ready(function() {
itemsToRender = [];
$('ul#project_menu li').click(function(e) {
menuItemId = (e.currentTarget.id);
itemsToRender.push(menuItemId);
var listSize = itemsToRender.length;
if (listSize > 1) {
for (var i = 0; i < listSize - 1; i++) {
currentItemId = itemsToRender[i];
$(getProjectId(currentItemId)).css('display', 'none');
}
menuItemId = itemsToRender.pop();
$(getProjectId(menuItemId)).fadeIn('slow');
} else {
$(getProjectId(menuItemId)).fadeIn('slow');
}
console.log(itemsToRender);
});
$('i.js-close-icon').click(function(e) {
projectId = (e.currentTarget.parentElement.id);
console.log(projectId);
$('#' + projectId).fadeOut('slow');
});
});
function getProjectId(menuItemId) {
if (menuItemId.indexOf('php') > 0) {
return '#php-project';
} else if (menuItemId.indexOf('node') > 0) {
return '#node-project';
} else if (menuItemId.indexOf('angular') > 0) {
return '#angular-project';
} else if (menuItemId.indexOf('mean') > 0) {
return '#mean-project';
}
}
In my attempt to address this issue, I created an array to store the item IDs clicked by the user, with the intention of hiding all corresponding divs except for the last one clicked. Despite implementing this logic, I am still facing challenges with multiple divs being visible simultaneously on the screen.
For instance, upon clicking on the PHP item, its respective div appears as expected. However, if I proceed to click on the NodeJS item, the PHP div should disappear while displaying the NodeJS div. But upon clicking back on the PHP item again, both divs start stacking up on each other rather than maintaining a single visible div. I am seeking insights on what might be causing this unexpected behavior.