CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Frosty619
Frosty619

Reputation: 1489

Unable to get only one div to appear at a time in jQuery

I have a list <ul id="project_menu"> of items stacked vertically on the left, and every time an item is clicked from that list, a div (project-details) slowly fades in on the right side of the screen to display more info. Now, I only want one div to appear at a time, so if the user clicks item A, then item B, then item D, I want all other divs to disappear except the one last clicked(D). To that end, I wrote my own code in jQuery but it does not work.

Here are the relevant files: 

<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';
    }
}

What I tried to do was create an array which has all the item Ids that user clicked, and set all the corresponding divs's display to hidden except the last element of the array, which is the one displayed.

Now, if I load the page and click php, the corresponding div appears on the right.If I then click nodeJS, php div disappears and node div appears. If I click on the php div again, the php div appears, and it stacks on top of the node div (which doesn't disappear!). What am I doing wrong?

Upvotes: 1

Views: 89

Answers (2)

Sivabalan
Sivabalan

Reputation: 1131

$('ul#project_menu li').click(function(e) {
   $project_id = $(this).attr("data-projectID"); //Get the project id wish to display
   $(".all_projects").hide(); //Hide all projects
   $("#"+$project_id).show(); //Show lastly clicked project
}

give common class for all project divs. Here i given as all_projects

Upvotes: 0

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

This is very easy, Just assign a class .common to all the items, then when you want to show one item, lets say #id3, you can do as follows.

// on event xyz....
jQuery(".common").hide();
jQuery("#id3").show();

Furthermore you can enhance by using the callback function as below.

// on event xyz....
jQuery(".common").hide(function(){
 jQuery("#id3").show();
});

Upvotes: 2

Related Questions