Is it feasible to have my progress bars load only upon clicking the link for my div?

I have a link to my div called mySkills, and currently the progress bars load automatically when I access my page. However, I only want the progress bars to load when I click on the link (href) to this specific div mySkills. How can I achieve that functionality?

<nav id="menu">
    <ul>        
        <li ><a href="#About">About</a></li>
        <li><a href="#mySkills">Skills</a></li>
        <li ><a href="#form">Contact</a></li>
    </ul>
</nav> 

<div class="mySkills">
    <h1>John <span>Skills</span></h1>
    <div class="skill">
        <h6>HTML</h6>
        <div class="progress_bar orange">
            <div style="width: 75%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>CSS</h6>
        <div class="progress_bar teal">
            <div style="width: 67%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>Photoshop</h6>
        <div class="progress_bar blue">
            <div style="width: 80%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>PHP</h6>
        <div class="progress_bar green">
            <div style="width: 55%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>Javascript</h6>
        <div class="progress_bar yellow">
            <div style="width: 55%;"></div>
        </div>
    </div>
</div>
javascriptjqueryhtmlcss

Answer №1

Thanks for reaching out! Here's a helpful solution to your query:

http://jsfiddle.net/pHyz9/

Added HTML Code:

<button id="update">Update Values</button>

CSS Modifications:

.skill {
    display: none;
}

.progress_bar div {
    transition: width 1s;
}

Javascript Implementation using jQuery:

$("#update").on("click", function(){
    $(".skill").fadeIn(800);
    $(".orange div").css("width", "75%");
    $(".teal div").css("width", "67%");
    $(".blue div").css("width", "80%");
    $(".green div").css("width", "55%");
    $(".yellow div").css("width", "55%");
});

This demonstration showcases the potential of CSS3 and provides a simple yet effective code snippet. Feel free to customize and enhance as needed!

Answer №2

Here are the necessary steps to achieve your goal.

Steps:

1. Start by hiding your <div class="mySkills"> using CSS.

div.mySkills
{
  display:none;
}

2. Then, on a 

<a href="#mySkills">Skills</a>

$('a[href="#mySkills"]').click(function(e){
  e.preventDefault;
  e.stopPropagation;

  $('div.mySkills').toggle();
});

For more information on .toggle(), you can visit this link.

P.S.: If I have understood your question correctly and provided a suitable answer, please let me know in the comments so that I can make any necessary corrections.

If you would like to see a working example, click on this link.

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

Issue with API delivering zip file - Headers cannot be modified after being sent to the client

I've encountered a problem with my API that generates a zip file using the archiver module and sends it back as a response to be downloaded on the client side. Whenever I attempt to send the zip file back, I receive the error Error [ERR_HTTP_HEADERS_S ...

javascriptnode.jsnode-archiver

Display/Conceal Content with Checkbox Utilizing jQuery

I have been attempting to create a section of an HTML form that will display or hide based on the status of a checkbox. Here is the key code snippet I am using: <script src="/js/jquery.js"></script> <script language="JavaScript"> fun ...

javascriptjquerycheckboxshow-hide

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

Issue detected with Bundler: Configuration object is not valid. The initialization of Webpack used a configuration object that does not align with the API schema

I am currently struggling to make my bundler compile properly. When trying to get it working, I encountered this error message in my terminal along with my webpack.config.js file. Here is the issue reported by the terminal: Invalid configuration object. ...

javascriptwebpack

What is the best way to increment the value of an input by any number using JavaScript and HTML?

My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...

javascripthtml

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

It's a bit tricky to explain without visuals, so I suggest checking out the JSFiddle link provided. Essentially, when a specific div is clicked, it should expand to reveal some inputs and buttons. However, the issue I'm facing is that upon loadin ...

javascriptjqueryhtmlanimationjquery-animate

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

javascriptjqueryhtmlcss

Getting JSON or JSONP data through a XAMPP local server is a straightforward process

After setting up a local server with XAMPP, my goal is to retrieve JSON / JSONP data from that server. Additional query: Do I need to upload the JSON file directly onto the server? Or can I achieve this using somePHPcoding? If so, which? I have come ac ...

javascriptphpajaxjsonxampp

Tips for keeping Fancybox from deleting the selected thumbnail

New to using fancybox and running into some issues.. starting to regret adding it. I have a row of thumbnails, all good, but when I click one it opens the THUMBNAIL instead of the actual link and on top of that, it DELETES the thumbnail from the DOM. I tr ...

javascriptjqueryfancybox

What is the process for logging in or authenticating before running tests with pa11y-ci?

Is there a way to authenticate users and test pages using pa11y-ci? When running pa11y-ci, I typically use this command: pa11y-ci --sitemap http://www.example.com/sitemap.xml --sitemap-find https --sitemap-replace http I came across some helpful informa ...

javascripttestingaccessibilitypa11y

Tips for integrating Rate Yo into the database

I have been attempting to integrate Rate Yo into the database, but I am consistently encountering an error message: Undefined index: rating in C:\xampp\htdocs\bill\bill\add_rate.php on line 57 Below is the code that I have trie ...

phphtml

Struggling to replicate the Quad from .obj file using only Face3

My latest project involved creating a tool to analyze the lengths and angles of faces on a 3D object. However, after updating to version r67 of Three.js, I encountered an issue where Face4 disappeared and I struggled to replicate my previous work. Specific ...

javascriptthree.jstexture-mapping

Is it not allowed to use target="_blank" in XHTML Strict 1.0?

I recently ran my XHTML Strict 1.0 document through the W3C validator service and it reported that: <ul id="socialnetwork"> <li><a href="http://www.twitter.com" target="_blank"></a></li> <li>< ...

htmlvalidationtargetw3cxhtml-1.0-strict

Is it possible to activate ng-class following an ng-click event?

Here is the element in question: <a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhot ...

javascriptangularjs

What is the best way to pass a function along with its state to utilize useContext in React

Currently attempting to grasp the concept of using react hooks. I have implemented createContext and am looking to pass both state and a function to other components, but could use some guidance on how to achieve this. I'm also questioning if it is ev ...

javascriptreactjsreact-hooks

Node.js socket.io: How to Handle Multiple Returned Values from a Single Event

I've been working on a simple chat app using Node, Express (^4.15.3), and socket.io (^2.0.3). However, every time I add a new message, I notice that I get an additional response each time. For instance, when I send the message "Hello" for the first t ...

javascriptnode.jssocketsexpresssocket.io

The animations in fontawesome 6.2 are completely ineffective

I've been struggling to make a spinner icon spin on my webpage. I made sure to download the latest version of font awesome and created a simple HTML file to troubleshoot the issue. Take a look at the HTML code below: <!doctype html> <html la ...

htmlcssfont-awesome

Struggling to connect HTML with CSS in Hugo

I am experimenting with a pre-fabricated theme in Hugo and incorporating some Bootstrap codes. I want to change the color of all links when displayed or hovered over. Despite searching extensively, I have been unable to achieve this through the use of CSS ...

htmlcssbootstrap-4colorshugo

What is the best way to ensure an element reaches its full height limit without triggering the need for page scrolling?

Can you help me with a dialog box issue I am facing? $(document).ready(function() { $('.ui.modal').modal('show'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link hr ...

cssflexboxheight

What is the best way to send a database variable that was created on a prior webpage?

I'm currently facing an issue with displaying the most recently added customer data from my database on a separate webpage. After a customer submits their information on a form page, they are redirected to another page where their entered details shou ...

htmlasp.net-core