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

What is the best way to create a navigation bar that opens on the same page when clicked?

Can someone help me figure out how to create a navbar that, when clicked, opens a small window on the same page like in this example image? ...

javascripthtmlcss

Ensuring thoroughness in validation without the use of specific text strings

Implementing the assignment or assertion of never at the end of a function is a strategy commonly used in Typescript to ensure exhaustive checks at compile time. To enable the compiler to recognize this, explicit strings are needed for it to check against ...

javascripttypescript

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

htmlcss

What happens when 'grid' property is undefined in modal?

I encountered an issue with my modal where I wanted to display pre-selected rows, but kept getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I have declared two Grid APIs with different na ...

javascriptangularjstwitter-bootstrap

Require field change in SharePoint 2010

I have implemented the following code on a SharePoint page - it locates the specified select based on its title and triggers an alert when the "Decision" value is selected. I am interested in removing the alert and instead substituting with code that iden ...

javascriptjquerysharepointsharepoint-2010

ECharts - Version 3.1.6 Event Plugin

I am looking for advice regarding the management of two charts with reference to echars from Baidu (version 3.1.6). Is there a way to control both charts by engaging in a click event on one of them? In simpler terms, how can I capture and respond to the c ...

javascripthtmlecharts

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any sugges ...

htmlcsstwitter-bootstrap-3css-tables

Is it possible to use async/await together with forEach in JavaScript?

Within my array of objects containing user information and emails, I aim to send emails using AWS SES. To accomplish this, I must decide between utilizing await or normal .then. Preferably, I would like to use await within a forEach loop. Is it feasible to ...

javascriptnode.jsgoogle-cloud-functions

When the onClick event is triggered, my intention is to dynamically insert a new

I'm having trouble adding a new row on each click, as my code keeps replacing the existing row. I attempted moving the if statement outside the addTable function, but it didn't work as expected. I've tried multiple solutions without succes ...

javascriptreactjs

Calculating the product of two input fields and storing the result in a third input field using a for loop

There's a small issue I'm facing. I have implemented a For Loop to generate multiple sets of 3 input fields - (Quantity, Rate, Price). Using a Javascript function, I aim to retrieve the Ids of 'Quantity' and 'Rate', and then d ...

javascriptphpjqueryhtmlmysql

Using the v-for directive in Vue.js to loop through an array and display

Looking at the image provided, I am trying to access the content. I attempted to do so using element.comments.content, but it did not seem to work as expected. Here is the snippet of code: <div class="fil-actualites-container"> <div cl ...

javascriptvue.jsvue-cli

Angular 5 in conjunction with Keycloak enabling access for non-authenticated users

I have a situation where I need to implement anonymous user access in my app, and for that purpose, I am incorporating the 'keycloak-angular' library along with Angular 5. The documentation instructs me to initialize the application as shown belo ...

javascriptangularkeycloak

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Arranging expandable divs horizontally

Looking for a way to align these blocks so they can expand while remaining in line, I'm struggling with maintaining their individual spaces. The layout I have in mind is as follows: In this setup, box 2 and 3 should automatically adjust to fill the a ...

htmlcss

Adding elements to an array using JavaScript

What is the correct way to add new values to an array like this? json = {"awesome":"45.22","supercool":"9876"} I attempted json.push("amazingness":"45.22");, but unfortunately it was not successful. ...

javascriptarraysjsonmultidimensional-array

In JavaScript, creating a new array of objects by comparing two arrays of nested objects and selecting only the ones with different values

I've been struggling to make this work correctly. I have two arrays containing nested objects, arr1 and arr2. let arr1 =[{ id: 1, rideS: [ { id: 12, station: { id: 23, street: "A ...

javascriptarraysreactjsecmascript-6filter

The usage of alert() is not allowed within a jQuery function

Currently, I am experimenting with jQuery for making AJAX calls. For now, I am trying to display the response text in a popup box using the alert() method. $(document).ready(function() { $(".jeobutton").mouseup(function() { var $button = $(thi ...

javascriptjqueryajaxalert

Diving into Redux brings up the question of whether to use a generic reducer or a

When working with Redux, what is the preferred approach: Creating entity-specific reducers or utilizing a generic reducer based on strict action keying conventions? The former can result in more boilerplate code but offers loose coupling and greater flexib ...

javascriptreactjsrestreduxstate

Is it possible to selectively export certain interfaces within a .d.ts file?

// configuration.d.ts export interface Configuration { MENU_STRUCTURE: Node[]; } interface Node { name: string; } Looking at the snippet above, I am aiming to only export Configuration. However, I noticed that I can also import Node from an ext ...

javascripttypescriptimportinterfaceexport