Negating Effects of a Previous Click Event on One Element When a Click Event Occurs on Another Element – CPanel

I’m having a problem with some vanilla JavaScript that I need help with. I know that the title of this question may seem like a double of others, but I believe there may be a slight twist to my issue that is causing me to either be confused or follow the wrong path of thinking. Here is how I will present my problem…

FIRST – I will describe the issue plus provide a temporary link to the page in question. It is my portfolio website… I would like to start looking for a Junior level Frontend Developer position.

SECOND – I will briefly show some research and my take on how to come to a solution.

THIRD – I will provide the code for the problem I’m trying to solve.

**** ONE IMPORTANT NOTE – I firmly believe in the “teach a man to fish, rather than give him a fish” philosophy and so if you have a solution, could you please explain WHY it works or point me to reference materials so I can read up on it?

(1) DESCRIPTION OF ISSUE ———————————–>

On the “Project Page” of the portfolio website that I’m building for myself, I am attempting to make it so that when you click on the image of a project I have done, it displays a block of descriptive text about that project on one side of the screen.

If you were to click on another project image, the already displaying block of text would disappear and a new block of text would appear in the same position.

I have managed to come up with code that displays the text blocks once a project image is clicked, but because the previous text block doesn’t disappear, the text blocks are stacking on top of each other when a new project image is clicked.

Here is a temporary link to the page in question: [http://s9m00001.site/projects.html][1]

(2) MY RESEARCH AND THOUGHTS TOWARDS A SOLUTION ————————–>

I have done Google searches and have checked out some of the suggested stack overflow posts that appeared when I typed the title to this question that I am posting. The closest thing I could find to my situation was this: [Remove changes from one element when event occurs on another element?

I tried to apply the concept of what that rather eloquent first solution provided. I even looked up the Array map () method on W3Schools because I was not familiar with it. That article is here: https://www.w3schools.com/jsref/jsref_map.asp

In attempting to solve the problem, my line of thinking was as follows:

1. use querySelector to grab all of the project images by class and put them into an array.
2. Add a “click” event listener to the items in the array that enables “function X”.
3. “Function X” changes the css “display” property of the appropriate text blocks from “none” to “block”.
4. Use an if statement to see if there are any other text blocks with a “display of “block” and then to change them to a “display” of “none” if the condition was true.

(3) CODE ——————–>

I am providing the code that I’m using below. Please note that I have included one of my attempts at solving the issue in my JavaScript code, which has been commented out and labeled as “ONE OF MY SOLUTION ATTEMPTS”. It was the attempt that I felt I was the closest with to solving the issue.

HTML

<!-- MAIN -->   
        <div id="upper-project-container">
<!-- Golden Glow Investigative & Protective Services -->
            <div class="project-text-left" id="proj-des1">
                <h4 class="project-tech">Golden Glow Investigative & Protective Services</h4>
                <p class="white-text-two">I have built and maintained the various iterations of the website for this company since 2004, using either Adobe Dreamweaver or proprietary contact management systems. But this redesign project required a much more intimate knowledge of coding than previously needed and a finished product within only 2 days.
                </p>
                <p class="white-text-two">The needs of this project presented me with the opportunity to use a template and work with source code that was written by someone other than myself, which was something I had not done up until that point.
                </p>
                <p class="white-text-two">The template came from https://html5up.net/spectral and I modified or restructured appropriate aspects of the code to produce a finished product that fit the client’s needs.
                </p>
                <div class="project-btn-container">
                    <div class="button02">
                        <p class="white-text">View Live</p>
                    </div>
                </div>
                <h4 class="project-tech">Released:</h4>
                    <p class="white-text-two">June, 2017</p> 
                <h4 class="project-tech">Technologies/Tools Used:</h4>
                <ul class="tech-list" id="golden-glow">
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JQuery</li>
                    <li>Responsive (adapts to mobile device screens)</li>
                    <li>Git (version control)</li>
                    <li>Adobe Photoshop</li>
                    <li>Sublime Text (text editor)</li>
                    <li>Filezilla FTP, SFTP, and FTPS file management tool</li>
                    <li>Cpanel (webhost management)</li>
                </ul>
            </div>
<!-- Jay Hunt Designs -->
            <div class="project-text-left" id="proj-des2">
                <h4 class="project-tech">Jay Hunt Designs</h4>
                <p class="white-text-two">Jasmine Hunter is a fashion designer that I met at my local Panera Bread restaurant (I have obtained 3 of my clients from hanging out there!). Miss Hunter wanted a site that had a clean and simple design, but was elegant and utilized the colors black, white, silver and gold.
                </p>
                <p class="white-text-two">The challenge I was faced with in order to complete this project had to do with the cross browser compatibility of the auto scrolling feature I built into the homepage of the site. I do the testing of my builds on Chrome, Safari, Firefox, Edge, and Opera. The auto scrolling feature worked on all of those browsers except for Firefox.
                </p>
                <p class="white-text-two">After researching the issue through Google searches I finally found a solution that took care of the issue.
                </p>
                <div class="project-btn-container">
                    <div class="button02">
                        <p class="white-text">View Live</p>
                    </div>
                </div>
                <h4 class="project-tech">Released:</h4>
                    <p class="white-text-two">April, 2017</p> 
                <h4 class="project-tech">Technologies/Tools Used:</h4>
                <ul class="tech-list" id="jay-hunt">
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JavaScript</li>
                    <li>JQuery</li>
                    <li>Responsive (adapts to mobile device screens)</li>
                    <li>Git (version control)</li>
                    <li>Adobe Photoshop</li>
                    <li>Sublime Text (text editor)</li>
                    <li>Filezilla FTP, SFTP, and FTPS file management tool</li>
                    <li>Cpanel (webhost management)</li>
                </ul>
            </div>
<!-- Goodie Treats -->
            <div class="project-text-left" id="proj-des3">
                <h4 class="project-tech">Goodie Treats</h4>
                    <p class="white-text-two">The focus of the Goodie Treats organization is to build the self esteem of minority children, girls in particular, through various activities and events. The request of the client was that I made the entire homepage function as the initial menu for the site and also that it featured images from some of their events, but they wanted the rest of the site to be a simple design that featured big background images.
                    </p>
                    <p class="white-text-two">The challenging homepage request from the client provided me with an opportunity to explore using a responsive grid system to build the home page. Building the site’s homepage to spec allowed me to grasp the basic concepts and usefulness of using a grid, as well as experiment with its responsiveness to various screen sizes.
                </p>
                <div class="project-btn-container">
                    <div class="button02">
                        <p class="white-text">View Live</p>
                    </div>
                </div>
            <h4 class="project-tech">Released:</h4>
                <p class="white-text-two">March, 2017</p>
                <h4 class="project-tech">Technologies/Tools Used:</h4>
                <ul class="tech-list" id="goodie-treats">
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JQuery</li>
                    <li>Responsive (adapts to mobile device screens)</li>
                    <li>Git (version control)</li>
                    <li>Adobe Photoshop</li>
                    <li>Sublime Text (text editor)</li>
                    <li>Filezilla FTP, SFTP, and FTPS file management tool</li>
                    <li>Cpanel (webhost management)</li>
                </ul>
            </div>
<!-- Rapture Guns -->
            <div class="project-text-left" id="proj-des4">
                <h4 class="project-tech">Rapture Guns & Knives</h4>
                <p class="white-text-two">During a visit to a local gun store for some target ammo, I overheard the store owner that he was in need of a website but didn’t have the knowledge on how to do it. I took that opportunity to introduce myself and shortly afterwards he became my client.
                </p>
                <p class="white-text-two">Because the majority of his customers were over the age of 50, the client wanted a very simple site that would appeal to the “nothing fancy” character of his customer base and that was modelled after the website for Gunsmoke Guns (now closed) out of Wheat Ridge, Colorado.
                </p>
                <p class="white-text-two">The challenge that I had in building this website had to do more with content than it did with any technical obstacles. I had to compose all of the copy for the website based on a recorded interview I conducted with the owner.
                </p>
                <div class="project-btn-container">
                    <div class="button02">
                        <p class="white-text">View Live</p>
                    </div>
                </div>
                <h4 class="project-tech">Released:</h4>
                    <p class="white-text-two">January, 2017</p> 
                <h4 class="project-tech">Technologies/Tools Used:</h4>
                <ul class="tech-list" id="goodie-treats">
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JQuery</li>
                    <li>Responsive (adapts to mobile device screens)</li>
                    <li>Git (version control)</li>
                    <li>Adobe Photoshop</li>
                    <li>Brackets (text editor)</li>
                    <li>Filezilla FTP, SFTP, and FTPS file management tool</li>
                    <li>Cpanel (webhost management)</li>
                </ul>
            </div>
        </div>
        <div class="project-text-right" id="proj-des1">
        </div>
        <div id="lower-project-container">
            <h3 id="project-heading">projects</h3>
            <div class="project-col" id="project01">
                <img src="images/project1.jpg" class="project-" id="des1" alt="golden-glow-security-website">
            </div>
            <div class="project-col" id="project02">
                <img src="images/project2.jpg"  class="project-" id="des2" alt="jay-hunt-designs-website">
            </div>
            <div class="project-col" id="project03">
                <img src="images/project3.jpg"  class="project-" id="des3" alt="goodie-treats-website">
            </div>
            <div class="project-col" id="project04">
                <img src="images/project4.jpg"  class="project-" id="des4" alt="rapture-guns-website">
            </div>
        </div>
    </div>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script src="scripts/main.js"></script>
</body>
</html>

CSS

/* ========== PROJECTS PAGE ========== */

.wrapper#projects {
    background: url(../images/bg02.jpg)fixed no-repeat center;
    background-size: cover;
    overflow: hidden;
}

#upper-project-container {
    width: 100%;
    height: 58%;
}

ul.tech-list {
    margin-left: 40px;
}

ul.tech-list li {
    list-style-type: disc;
    font-family: 'Open Sans', sans-serif;
    font-size: .8rem;
    line-height: .95rem;
    color: #ffffff;
}

.project-text-left {
    position: absolute;
    top: 10%;
    left: 4%;
    width: 720px;
    height: 400px;
}

.project-text-left#proj-des1 {
    display: none;
}

.project-text-left#proj-des2 {
    display: none;
}

.project-text-left#proj-des3 {
    display: none;
}

.project-text-left#proj-des4 {
    display: none;
}

.project-text-right {
    position: absolute;
    top: 10%;
    right: 4%;
    width: 720px;
    height: 400px;
    display: none;
}

.show {
    display: block;
}

#lower-project-container{
    width: 100%;
    height: 45%;
}

.project-col {
    width: 25%;
    margin-top: 20px;
    text-align: center;
    float: left;

    -webkit-transition: transform .4s;
    -moz-transition: transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s;
}

.project-col:hover {
    transform: scale(1.1);

    -webkit-transition: transform .4s;
    -moz-transition: transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s;
}

img {
    max-width: 100%;
    box-shadow: 24px 17px 44px rgba(0, 0, 0, .7);
    cursor: pointer;
}

JAVASCRIPT

// ----- PROJECT PAGE
Project panels are visible on click, but 
If another project panel is visible, it is then hidden.*/

/*var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');

(showProject).forEach(function(thumb) {
    thumb.addEventListener('click', function(e) {
        const project = document.querySelector('#proj-' + e.target.id);
        project.style.display = 'block';
    });
});


// ========== ONE OF MY SOLUTION ATTEMPTS ======== 

/* window.onload = function() {
  var showProject = document.querySelectorAll('#lower-project-container .project-');

  (showProject).forEach(function(thumb) {
    thumb.addEventListener('click', function(e) {
        const project = document.querySelector('#proj-' + e.target.id);

// If another project panel is visible, it is then hidden.

      [].map.call(document.querySelectorAll('.project-text-left'), function(e) {
        e.classList.remove('show'); // remove from all
      });
      this.classList.add('show'); // add on current
    });
  });
} */

(4) CONCLUSION ——————–>

Thank you for whatever help you can provide me and please let me know if there are any questions I can answer or additional code that you may need to look at to better see any relationships.