Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on.

After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to "none" and attempt to use jQuery to change it to "block" upon clicking the link, nothing happens.

Despite using .css("display", "block"), I cannot figure out why it's not working. Any suggestions would be greatly appreciated! 

<style type="text/css">

   #contactOuter {
   position: fixed;
   height:100%;
   width: 100%;
   background: rgba(10, 10, 10, 0.5);
   z-index: 1010;
   display: none;
 }

</style>


<html>

<a href="" id="contactLink">Contact Us</a>

</html>


<script type="text/javascript">

$("#contactLink").click(function(){
    $("#contactOuter").css("display", "block");
});

</script>
jqueryhtmlcss

Answer №1

Your solution is effective! The only issue is that the page refreshes when clicking on the anchor link. To prevent this, you can use javascript:void(0); in the href attribute:

<a href="javascript:void(0);" id="contactLink">Contact Us</a>

<div id="contactOuter">Hello</div>

Additionally, it's a good practice to encapsulate JavaScript within 

$(document).ready(function{ //code here });
:

$(document).ready(function() {
  $("#contactLink").click(function() {
    $("#contactOuter").css("display", "block");
  });
});

I hope this clarifies things for you.

Answer №2

To begin, it is important to understand the structure of your HTML code starting with html, head, body and grasp the flow of the page, which reads from top to bottom. Moreover, ensure that you include the jquery.js file first...

<html>
<head>
<style type="text/css">

   #contactOuter {
   position: fixed;
   height:100%;
   width: 100%;
   background: rgba(10, 10, 10, 0.5);
   z-index: 1010;
   display: none;
 }

</style>
</head>
<body>
<a href="" id="contactLink">Contact Us</a>

<script>

$("#contactLink").click(function(){
    $("#contactOuter").css("display", "block");
});

</script>

</body>
</html>

Answer №3

To properly accomplish this, one should utilize the show and hide functions:

$("#contactLink").click(function(){
    $("#contactOuter").show();
});

Alternatively, another approach is to employ the jQuery css method:

$("#contactLink").click(function(){
    $("#id").css("display", "block");
});

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

Reconstructing tables using jQuery

Let's work with the following table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> ...

jqueryhtml-table

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Develop an onclick function with an href attribute

I am interested in transforming links into AJAX versions whenever possible. To achieve this, I plan to implement a function called replaceLinks that will add an onClick handler to each link on the page and trigger ajaxPageWSM(href). This is what I currentl ...

javascriptjqueryhtml

What is the best way to enable and disable the edit-in-place feature using jQuery?

Recently, I decided to experiment with the jQuery In Place Editor but I've come across an issue I can't seem to solve. Below is the code snippet that I have been working on. In my implementation, I am utilizing the jQuery toggle method to enable ...

javascriptjqueryedit-in-place

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

htmlimagesrc

Starting a fresh SSH terminal directly from a web browser

I have an SSH IP address. Is it feasible to launch an SSH terminal through a web browser, similar to clicking on a hyperlink or Google Play store link? For instance: Click Here to Open SSH Terminal Upon clicking this link, the SSH session should open an ...

javascriptphpjquerysshbrowser

Center align Bootstrap 4 dropdown menu

I am attempting to center align my dropdown menu using Bootstrap 4. Following the given example: [ This is the result I am achieving: [ This is the code I have implemented: <div class="container"> <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Storing a screen value with javascript made simple

I need to incorporate memory functions into my calculator, specifically MS (Memory Store), MR (Memory Restore), and MC (Memory Clear). For Memory Store, the screen value of the calculation needs to be saved, so if it's 90 + 7 = 97, that result should ...

javascripthtmlcssevents

Sculpting the excess from a div-generated HTML button

I need help with adjusting the appearance of a link to make it look like a button. Currently, the button looks too "fat" because of the red background around the text. How can I reduce this effect? I've tried tweaking the width of the div, but that j ...

htmlcss

Struts2 jQuery tag select fails to fetch data

I've been attempting to utilize the <sj:select> tag to display my list in Struts2 JSP. Within the same section, I have also included a <s:select> tag The data is being populated in the <s:select> tag while no data is showing up in ...

jqueryjsonajaxstruts2struts2-jquery

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

I am encountering an issue with the code below where I am unable to filter entry.AllLinks. The code snippet is shown here: $.ajax({ url: url, type: "get", headers: {"Accept": "application/json;odata=verbose"}, success: function (data) { ...

javascriptjqueryarraysajax

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

Error encountered during Nuxt build: Syntax error on Line 1 of the SCSS component file

I'm currently working on a project in node 18.7.0 that utilizes nuxt 2.15.8. Within my Vue component, I have the following SCSS code: <style lang="scss"> .Accordion { --Accordion__margin-top: 2.5rem; &__items { margin ...

cssvue.jssassnuxt.jsscss-lint

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected. ...

javascriptcssvue.jslocal-storagequasar-framework

The submitHandler constantly refreshes the webpage

Struggling to send a form to a PHP file upon submission and retrieving the value without having to reload the page. It was working smoothly for some time but now it just won't cooperate. I have multiple pages with similar functionality, where 2 work p ...

jqueryjquery-validate

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Practical applications of flexible layouts in everyday life

I'm currently on the hunt for real-world examples of elastic layouts, specifically those based on using em's for widths. Surprisingly, I haven't been able to find much out there. If anyone knows of any examples, I would greatly appreciate it ...

htmlresponsive-designelasticlayout

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

javascriptcssreactjsnext.js

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

I recently implemented Bootstrap 4.6 into my project. The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when th ...

htmlcsstwitter-bootstrapbootstrap-4