Utilizing JQuery click function to dynamically modify CSS styles

Question

Utilizing JQuery click function to dynamically modify CSS styles

Snippet:

    <div id="r1242">
        <img class="trans" src="http://sakshamcomputer.com/images/printerLogo.jpg"/>
        <div class="labels" id="p1242">
            <strong>Available Printers:</strong><br><br>
            Lanier LD075 Rm1242<br><br>
            Rm1242_Ricoh_Aficio_MP_7502
        </div>
    </div>

CSS Code:

    #r1242 #p1242 {
         display:none;
    }

JQuery Code:

    $('div .trans').click(
          function() {
             $('#p1242').css("display","block");
          }
    });

I am looking to use JQuery to adjust the "display" property in my CSS code. I have experimented with different selectors for the element, like "$('#r1242 #p1242')" and "$('# p1242')". What is the correct way to change the display value using JQuery?

jquery html css onclick

Answer 1

Answer №1

Your jQuery code is encountering a syntax error that is preventing it from running properly. The issue lies in an extra closing curly bracket } at the end of your function. Simply remove this extra bracket and your code will work as intended:

$('div .trans').click(
      function() {
         $('#p1242').css("display","block");
      }
);

Here is the link to the working JS Fiddle: http://jsfiddle.net/utHgS/

Answer 2

Your jQuery code is encountering a syntax error that is preventing it from running properly. The issue lies in an extra closing curly bracket } at the end of your function. Simply remove this extra bracket and your code will work as intended:

$('div .trans').click(
      function() {
         $('#p1242').css("display","block");
      }
);

Here is the link to the working JS Fiddle: http://jsfiddle.net/utHgS/

Answer 3

Answer №2

Instead of manually adding CSS through jQuery, you can simply use the show() function.

Check out the DEMO here

$('.trans').click(function(){
  $('#p1242').show();
});

Answer 4

Instead of manually adding CSS through jQuery, you can simply use the show() function.

Check out the DEMO here

$('.trans').click(function(){
  $('#p1242').show();
});

Answer 5

Answer №3

You seem to have an additional curly bracket here:

$(document).ready(function(){
$('div .trans').click(function(){
         $('#p1242').css("display","block");
});
});

Header section:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type='text/css' href="main.css"/> 
<script type='text/javascript' src='script.js'></script>

Here is a functional fiddle link: http://jsfiddle.net/CMJb3/

Answer 6

You seem to have an additional curly bracket here:

$(document).ready(function(){
$('div .trans').click(function(){
         $('#p1242').css("display","block");
});
});

Header section:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type='text/css' href="main.css"/> 
<script type='text/javascript' src='script.js'></script>

Utilizing JQuery click function to dynamically modify CSS styles

Answer №1

Answer №2

Answer №3

Here is a functional fiddle link: http://jsfiddle.net/CMJb3/

Similar questions

I kindly request your assistance in resolving the issues with the append() and empty

Matching CSS attribute values with another attribute

Troubleshooting problem with event triggering in Angular's ngSelect dropdown menu items

Tips for achieving full width with Bootstrap

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

To modify the color of the breadcrumb navigation bar from purple to #d6df23 using PHP

What is the best way to wrap all divs except for the one with a .header-container-wrapper class?

jQuery toggle buttons to show or hide on radio button selection

Press the "Load More Categories" button in Wordpress to display additional categories

Align an element at the center of both the x and y axes using CSS

Experiencing problems with various React Carousel libraries when it comes to displaying

Tips for Resizing google reCAPTCHA

The function attached to the `click` event of `#cart-continue` is not invoking

File remains visible after deletion upon refreshing the page, but disappears after using the Ctrl + F5

Is it possible to successfully pass a parameter from a servlet to a JavaScript function, but encounter issues when trying to view the database

Is there a light font that cannot be replicated?

Upload file to database and move to new location

With Firefox, when submitting a form only the final repeated region value is $_POSTed and not all of them

Display a hidden form field in Rails depending on the object's value

Injecting CSS into a dynamically created element within a Polymer component using jQuery