Displaying a project in the same location using jQuery

Struggling with jQuery and positioning hidden items that need to be shown? I have two white boxes - the left one is the Client Box (with different names) and the right one is the Project Box (with different projects). My goal is to show the projects of a client when their name in the left box is clicked. Everything works so far, but when I click on a second user, their projects appear under the projects of the first user. I want all projects to be displayed on the same line, not stacked vertically.

Here is the link to jsfiddle

http://jsfiddle.net/m2w3owkh/1/

Thank you!

javascriptjqueryhtmlcssposition

Answer №1

use this

$("#show1").click(function(){
        $(".project_1").toggle();
    $('.projectList>li>a>p').not('.project_1').hide();
    });

    $("#show2").click(function(){
        $(".project_2").toggle();
        $('.projectList>li>a>p').not('.project_2').hide();
    });

     $("#show3").click(function(){
        $(".project_3").toggle();
         $('.projectList>li>a>p').not('.project_3').hide();
    });

      $("#show4").click(function(){
        $(".project_4").toggle();
          $('.projectList>li>a>p').not('.project_4').hide();
    });
.cprojectClients{ 
position: relative;
left: 40px;
float: left;
background-color: #ffffff;
width: 280px;
height: 400px;
z-index: 2;
-webkit-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);

}


.cprojectOffers{
float: right;
position: relative;
right: 10px;
top:10px;
background-color: #ffffff;
width: 280px;
height: 400px;
z-index: 1;
-webkit-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="cprojectClients">
<p>Client Name</p>

<ul class="list">
 <li>
 <h3 id="show1">Joe</h3>
    </li>

<li>
   <h3 id="show2">John</h3>
</li>
<li>
<h3 id="show3">Jason</h3>
</li>
<li>
    <a href="javascript:;"><h3 id="show4">Jacob</h3></a>
</li>
</ul>

</div><!--.cproject-clients-->



<div class="cprojectOffers">
<p>Project Name</p>

<ul class="projectList">
 <li>
 <a href="javascript:;"><p style="display:none;" class="project_1">project_1.pdf</p></a>
    </li>
    <li>
    <a href="javascript:;"><p style="display:none;" class="project_1">project_9.pdf</p></a> 
    </li>
<li>
  <a href="javascript:;"><p style="display:none;" class="project_2">project_2.pdf</p></a> 
</li>
<li>
<a href="javascript:;"><p style="display:none;" class="project_3">project_3.pdf</p></a> 
</li>
<li>
    <a href="javascript:;"><p style="display:none;" class="project_4">project_4.pdf</p></a> 
</li>
<li>
    <a href="javascript:;"><p style="display:none;" class="project_4">project_5.pdf</p></a> 
</li>
<li>
    <a href="javascript:;"><p style="display:none;" class="project_4">project_6.pdf</p></a> 
</li>
<li>
    <a href="javascript:;"><p style="display:none;" class="project_4">project_7.pdf</p></a> 
</li>
<li>
    <a href="javascript:;"><p style="display:none;" class="project_4">project_8.pdf</p></a> 
</li>


</ul>
</div><!--.cproject-offers-->

Answer №2

My recommendation would be to reorganize the functionality of this setup. The current layout includes all projects listed within the same ul, causing gaps to appear above and below the selected client's projects when hiding projects from other clients.

To address this issue, consider creating separate ul elements for each group of projects and toggle their visibility on click events.

$(function() {
    $("#show1").click(function(){
        $(".project").hide();
        $(".project_1").toggle();
    });

    $("#show2").click(function(){
        $(".project").hide();
        $(".project_2").toggle();
    });

     $("#show3").click(function(){
         $(".project").hide();
        $(".project_3").toggle();
    });

      $("#show4").click(function(){
        $(".project").hide();
        $(".project_4").toggle();
    });
});
.cprojectClients{ 
position: relative;
left: 40px;
float: left;
background-color: #ffffff;
width: 280px;
height: 400px;
z-index: 2;
-webkit-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);

}


.cprojectOffers{
float: right;
position: relative;
right: 10px;
top:10px;
background-color: #ffffff;
width: 280px;
height: 400px;
z-index: 1;
-webkit-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
}

.project {
    display:none;
}

.list h3 {
    cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cprojectClients">
<p>Client Name</p>

<ul class="list">
<li>
<h3 id="show1">Joe</h3>
</li>
<li>
<h3 id="show2">John</h3>
</li>
<li>
<h3 id="show3">Jason</h3>
</li>
<li>
<h3 id="show4">Jacob</h3>
</li>
</ul>
</div><!--.cproject-clients-->

<div class="cprojectOffers">
<p>Project Name</p>

<ul class="project project_1">
<li>
<a><p>project_1.pdf</p></a>
</li>
<li>
<a><p>project_9.pdf</p></a> 
</li>
</ul>
<ul class="project project_2">
<li>
<a><p>project_2.pdf</p></a> 
</li>
</ul>
<ul class="project project_3">
<li>
<a><p>project_3.pdf</p></a> 
</li>
</ul>
<ul class="project project_4">
<li>
<a><p>project_4.pdf</p></a> 
</li>
<li>
<a><p>project_5.pdf</p></a> 
</li>
<li>
<a><p>project_6.pdf</p></a> 
</li>
<li>
<a><p>project_7.pdf</p></a> 
</li>
<li>
<a><p>project_8.pdf</p></a> 
</li>
</ul>
</div><!--.cproject-offers-->

You can further refine this structure to make it even cleaner and enable the jQuery function to handle any number of clients/projects dynamically, eliminating the need to manually add new click functions each time a new client is added. This should provide you with a solid starting point.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...

javascripthtmlcss

Initiate the function one time

The Introduction: I need assistance with a form that triggers a jQuery function when a button is clicked. The issue arises after the initial execution, as the function continues to run one more time. My dilemma is figuring out how to ensure that the funct ...

javascriptjqueryangularjs

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Currently, I am in the process of developing a library that will be available as an Angular module through npm. The library itself has been written using typescript. Everything was functioning perfectly up until Angular version 5.0.0, but after this update ...

javascriptangularjsnode.jsangulartypescript

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

I'm currently grappling with the concept of integrating external APIs in React and am interested in using Google Maps' API to showcase a map within a child component. My goal is to gain insight into how this can be done without relying on any ext ...

javascriptajaxgoogle-mapsreactjsgoogle-maps-api-3

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

I am currently working on storing values with VueX, specifically using Vuex 4.0 instead of the older version 3.0. While attempting to commit a value, I encountered an issue as follows: ... this.$store.commit("changerusername", u) ... To addres ...

javascriptvue.jsvuex

Show information from database in a drop-down menu utilizing jQuery

tbl_fruits id | name | 1 | banna | 2 | apple | 3 | orange | 4 | kiwi | Currently, I have an HTML script that includes a form for adding users: <form id="form-add_users" autocomplete="off"> &l ...

jquerymysqlajax

Ways to use string functions in JavaScript to substitute with /

Here is the image path I am working with: var str = "D:\Poc\testProject\DataPush\public\unzip\cust\AccountData\2.jpg" When I included "unzip" in the path, it threw an error as shown in this image, but when ...

javascriptnode.jsreplace

Error: Knockout sortable array failing to render nested elements accurately

As a newcomer to Knockout.js, I have recently delved into the world of JQuery and the knockout-sortable project. My current project involves utilizing a complex data structure to present forms. Specifically, I am attempting to create a nested sortable arra ...

javascriptjqueryknockout.jsjquery-ui-sortableknockout-sortable

Model-View-Controller (MVC) and

Apologies for my initial question, as I am new to this. I am having an issue with using a radiobutton for the first time. I want to create a radiobutton that looks like the image provided in the link below: My image When the radio button is checked an ...

htmlasp.net-mvcradio-buttondetailsview

Best Practices for Safely Storing the JWT Client Credentials Grant

Currently, I am working on a NodeJS Express Application that connects to an Auth Server using client credentials grant. After receiving the token from the Auth Server, I use it to access data from an API. I am seeking advice on the most effective way to s ...

javascriptnode.jsexpressjwtopenid-connect

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

Calculating the Sum of Values in PHP using an HTML Form and Jquery

Looking to expand my knowledge of jQuery, I am attempting to create a straightforward page for practice. The goal is to develop a form that will send its values to PHP to be summed and return the results. These results will then be displayed dynamically on ...

phpjqueryhtmlformssum

Creating trails by following the cursor's movement in KineticJS

Currently, I am working on a drawing application using KineticJS. While I have successfully used it to draw shapes and straight lines by following the method outlined in KineticJS - Drawing Lines with Mouse, I now need to draw a line along the mouse's ...

javascriptjqueryajaxhtmlkineticjs

What are the reasons behind the inability to import an image file in Next.js?

Having an issue with importing image file in Next.js I'm not sure why I can't import the image file... The image file is located at 'image/images.jpg' In Chrome browser, there are no error messages related to the image, However, in ...

javascriptreactjsimportnext.jsnext-images

Guide on accessing CGI Script response using AJAX

Greetings, Here is the situation: I'm working on a login form. Once the submit button is clicked, it needs to trigger a CGI script called "someurl?userName=user&password=pwd". Depending on the response from the script, I should be able to navigat ...

javascriptjqueryajaxcgi

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...

javascripthtmlfirefoxwebrtcgetusermedia

Developing ES6 modules in C++ using Node.js

Here is a previous example showcasing how to create a Node.js addon in C++: https://nodejs.org/api/addons.html You can use node-gyp to build it into a common JS module, which works well with the 'require' function. However, when trying to impo ...

javascriptc++node.jsecmascript-6module

Why are link elements that generate hyperlinks important?

I am confused about the purpose of using link tags to create hyperlinks. Is there a reason to include code like <link rel="author" href="about.html">, <link rel="next" href="next.html">, or <link rel="help" href="help.html">? Since this ...

htmlhyperlink

Injecting data into a Q promise

I'm facing some issues related to what seems like JavaScript closures. In my Express + Mongoose web application, I am utilizing the Q library for Promises. I have a question regarding passing request data to the promise chain in order to successfully ...

javascriptnode.jsexpresspromiseq

What steps should I take to resolve the "Module Not Found" issue that occurs when I use the command "npm start" after setting up a new React project with npm?

Just starting out with React.js and npm and encountered an issue. After using the command: npm create react-app my-test-npm-react-app I waited for the project to be created successfully. However, when I tried running: npm start I received the followin ...

javascriptreactjsnpmyarn-v2