Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer.

My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an image/link. Clicking on the image takes the user to the project URL.

<div class="work-content">
    <h2 class="con-active" id="contentOne">Content One</h2>
    <h2 class="con-hidden" id="contentTwo">Content Two</h2>
    <h2 class="con-hidden" id="contentThree">Content Three</h2>
    <h2 class="con-hidden" id="contentFour">Content Four</h2>
    <h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
    <a href="about.html" class="popup" id="popupOne">
        <div class="popup-content">Background One</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupTwo">
        <div class="popup-content">Background Two</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupThree">
        <div class="popup-content">Background Three</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFour">
        <div class="popup-content">Background Four</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFive">
        <div class="popup-content">Background Five</div>
    </a>
</div>
<ul class="work-ul">
    <li class="work-link"><button class="button" id="workOne">WORK</button></li>
    <li class="work-link"><button class="button" id="workTwo">WORK</button></li>
    <li class="work-link"><button class="button" id="workThree">WORK</button></li>
    <li class="work-link"><button class="button" id="workFour">WORK</button></li>
    <li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>

Upon entering the page, the first project's description and image are displayed (with a class "is-active"). If a user clicks on any button, the current description/image will hide and the new one corresponding to the selected project will show.

I struggle with arrays and Each functions, particularly in removing the "is-active" class from undesired elements and adding it to the desired ones.

Feel free to suggest alternative HTML markup, as this is just my initial attempt and I've been stuck on this for a day.

Answer №1

To enhance your current configuration, consider implementing the following approach:

$(document).ready(function() {
    $('.work-ul button').each(function(index) {
        $(this).click(function(event) {
            $('.work-content h2, div.moving-zone a').hide();
            $('.work-content h2:eq('+index+'), div.moving-zone a:eq('+index+')').show();
        });
    });
});

Ensure to establish initial styles or classes for hiding all but potentially your first portfolio item.

Answer №2

For scenarios like this, I prefer utilizing the data-* attributes.

Assign a data-id attribute to the button.
Give the related elements (header and anchor) a data-content attribute with the same value as above.

Upon clicking the button, start by hiding all elements with a data-content attribute, then display those whose data-content attribute matches the data-id attribute.

This approach allows you to possibly eliminate some id attributes, but ultimately that decision is up to you.

$(function() {
  $('.button').on('click', function() {
    var id = $(this).data('id');
    $('[data-content]').hide();
    $('[data-content="'+id+'"]').show();
  });
});
.con-hidden,
.is-hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-content">
    <h2 class="con-active" id="contentOne" data-content="1">Content One</h2>
    <h2 class="con-hidden" id="contentTwo" data-content="2">Content Two</h2>
    <h2 class="con-hidden" id="contentThree" data-content="3">Content Three</h2>
    <h2 class="con-hidden" id="contentFour" data-content="4">Content Four</h2>
    <h2 class="con-hidden" id="contentFive" data-content="5">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
    <a href="about.html" class="popup" id="popupOne" data-content="1">
        <div class="popup-content">Background One</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupTwo" data-content="2">
        <div class="popup-content">Background Two</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupThree" data-content="3">
        <div class="popup-content">Background Three</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFour" data-content="4">
        <div class="popup-content">Background Four</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFive" data-content="5">
        <div class="popup-content">Background Five</div>
    </a>
</div>
<ul class="work-ul">
    <li class="work-link"><button class="button" id="workOne" data-id="1">WORK</button></li>
    <li class="work-link"><button class="button" id="workTwo" data-id="2">WORK</button></li>
    <li class="work-link"><button class="button" id="workThree" data-id="3">WORK</button></li>
    <li class="work-link"><button class="button" id="workFour" data-id="4">WORK</button></li>
    <li class="work-link"><button class="button" id="workFive" data-id="5">WORK</button></li>
</ul>

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

How can I execute a different seed file using Sequelize-cli before running the main seed file?

I recently created a seeder file using sequelize-cli to bulk insert data into a MySQL database, and everything is working perfectly. However, one of the fields I am inserting (userId) requires a value that is already present in another table called User. ...

Applying CSS transformations to scale up a div within its parent body

Having an issue with formatting an anchor link using transform scale attributes on hover. The link is inside a div that's aligned to the right, and I want it to enlarge when hovered over. However, this increase in size also affects the parent div, ca ...

How to retrieve multiple values from a single select dropdown form field using React

In my React Material form, I have a select dropdown that displays options from an array of objects. Each option shows the name field, which is set as the value attribute (cpuParent.name). However, I also need to access the wattage field (cpuParent.wattage) ...

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

Revealing elements with AngularJS ng-show directive prior to concealing them

Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS. My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open su ...

Issues encountered transferring data using wp_localize_script

I need help passing PHP data to a JavaScript script in my project. To achieve this, I am utilizing the wp_localize_script function. wp_register_script('googlechart', 'https://www.gstatic.com/charts/loader.js'); wp_register_script(&apos ...

Determine if Param is empty or not within the context of express.js

I am looking to create a table and populate it with all the parameters that are not empty in the parameter list provided below: http://localhost:5002/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="407535732b7008121931190539142 ...

Exploring Facebook Graph API response with Angular 2 Mapping

I am using HTTP calls to access the Graph API in order to retrieve posts from a Facebook page. Here is the code snippet that fetches an array of posts: let url = 'https://graph.facebook.com/15087023444/posts?fields=likes.limit(0).summary(true),comme ...

Mastering the art of looping through JSON values using AngularJS ng-repeat

Is there a way to use ng-repeat in order to iterate and access the name values: test01, test02, and test03 from my JSON data? Any guidance on how to achieve this using ng-repeat would be greatly appreciated. Thanks in advance! Check out this Fiddle link. ...

I am confused about the process of mounting components

Utilizing pattern container/representational components, I have a CardContainer component that retrieves data from a server and passes it to a Card component. Container Component: class CardContainer extends Component { state = { 'ca ...

Adding items from the JSON data to a nested array at index i

In my project, I am working with two files: index.js and list.json. My goal is to extract an element from list.json and insert it into a nested array following the structure [hour][visits per hour]. The hour refers to the index of the hour; for example, ...

Incorporate an animated loading GIF image within the ajaxStart function, dynamically appending it within a div tag

Is there a way to dynamically display a loading GIF image on all HTML web pages? var loading = $(' <div id="loading"> <img src="../img/loading%20(1).gif" id="loading-image" alt="Loading..." /> </div>'); $(document).ajaxStart( ...

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

Best practices for sharing data between controllers in an Angular application

It appears that this topic has been discussed before, but... While service or events can be used for this purpose, there is conflicting information online about the frequency of using events. Creating a separate service may not be the ideal solution eith ...

When should we utilize the React.Children API in React applications?

Exploring the potential use cases of the React.Children API. The documentation is a bit confusing for me (Using React v.15.2.0). https://facebook.github.io/react/docs/top-level-api.html#react.children According to the documentation, this.props.children ...

Examining a feature by solely utilizing stubs

I've been immersed in writing tests for the past few weeks. In my workplace, we utilize Mocha as our test runner and Chai for assertions, with Sinon for creating stubs. However, there's a recurring issue that's been bothering me. I've w ...

The new Date function is malfunctioning on Firefox

Could you please explain why this particular function is not functioning correctly in Firefox (V 34 latest)? It appears to be working successfully on all other browsers, but 'DatePosted' is displaying as Invalid Date. Do you have any insights on ...

Using Angular 4: Redirecting Menu to Component with Electron

I am currently working on my first project using Angular 4 and Electron to develop a desktop application. One of the challenges I'm facing is figuring out how to redirect to a specific component when a submenu item is clicked after overriding the ele ...

Displaying a static image on an HTML5 canvas without any movement

As a novice in canvas game development, I must apologize for my lack of knowledge. I have an image with dimensions 2048px width and 1536px height that needs to be placed within a canvas (the width and height vary on different devices). While I am able to ...

Angular allows for the creation of dynamic content, much like the append function in jQuery

I am currently working with Angular to create a dynamic star rating system. I have implemented a function to generate the code for the stars dynamically, but unfortunately, they are not showing up on the page. Can anyone help me troubleshoot this issue? B ...