Using CSS classes to implement the Jquery .show() function

Exploring new territories in Javascript and seeking guidance. Found some code on jquery's documentation http://api.jquery.com/show/

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
   </head>
    <body>

     <button>Click Here</button>
      <p style="display: none">Hello World!</p>

     <script>
     $( "button" ).click(function() {
      $( "p" ).show( "slow" );
     });
    </script>

  </body>
 </html>

Inquiring about the concept of changing "p" to a class to reveal an entire content area upon click, similar to www.shopify.com structure under the header.

Pondering something like this:

<div class="first-reveal">
 <p style="display:none;">Lorem Ipsum Dolor Sit Amet</p>
</div>

<script>
 $( "button" ).click(function() {
  $( ".first-reveal" ).show( "fast" );
 });
</script>

Answer №1

When choosing a class to select, you should follow this format:

 $( "button" ).click(function() {
     $( ".first-reveal" ).show( "fast" );
 });

The class selector is denoted by . and the id selector is indicated by #

For example:

$(".myClass")

$("#myId")

It works similarly to CSS styling :)

Answer №2

The first-reveal class requires a period before the selector in jQuery to properly target it:

$( ".first-reveal" ).show( "fast" );

If it were an ID instead of a class, the syntax would be as follows:

$( "#first-reveal" ).show( "fast" );

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 to display a dynamic loading symbol using jquery and .NET technologies

I am facing an issue with a regular HTML button that has a styled background image using CSS. The button is supposed to call a JavaScript function when clicked, which then redirects to 'page.aspx'. Prior to the redirect, I want to change the back ...

Is there a way to prevent an ajax call from refreshing the page?

I've implemented image upload functionality in my project. However, when I click the upload button and select a file, the images are displayed via an AJAX call with HTML code. Unfortunately, afterwards, the page refreshes and all form data is lost. E ...

A guide on comparing a string with a ReactJS application to a collection of strings and showcasing the outcome

In one of my React Components, I have an input field that will be used to enter email IDs of users. I have a list of email IDs stored on the server. When entering text in the input field, I would like suggestions for email IDs from the existing list to app ...

The code functions correctly when executed in the console, however, it encounters issues when

My code runs correctly in the console but produces incorrect results in Hackerank Issue: Determine the count of all substring palindromes within a given string function isPalindrome(str) { var len = str.length; var mid = Math.floor(len / 2); for ...

What are some best practices for integrating CSS grid layouts with React for optimal results?

My current project involves developing a Single Page Application using ReactJs and CSS grid layouts for styling components. However, I've encountered an issue where the two technologies do not seamlessly integrate: CSS grid layouts are typically appli ...

Exploring the power of sessions and socket.io in the world of node.js and express.js

Is there a way to retrieve the user session using socket.io? io.sockets.on('connection', function(socket) { // Need to access and manage the user's session }); ...

Tips for executing a sequence of actions following a successful data retrieval in JavaScript

let users_data = []; try { let users = await chatModel.find({ users: isVerified.userId }); users.forEach(function (doc) { doc.users.forEach(async function (user) { if (isVerified.userId !== user) { let result = await userModel.find({ ...

The PHP response is constantly changing and adapting, creating

My webpage has a button that triggers an ajax request to a php page, all working well. I have a database called messages, with columns for "id", "receiver", "sender", and "message". Let's say there are two entries in the database where both the sender ...

Obtain a numerical output from a selection of numbers

I am facing a simple problem that I can't solve due to my lack of knowledge and have not been able to find any solution online. What I want to achieve is: Create a "value 1" from an array of integers. Generate a random "value 2". Check if the rando ...

In React Native, it is not possible for one function to be executed inside another function

When clicking on a button, I have two functions that need to be executed: this.state = { myLimit: this.props.limit.lim, modalOpen: false, } submit = () => { // Send state to Redux reducer let lim = {'lim':this.state.my ...

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

An Easy Breakdown of How AJAX Works

I have a question that I believe someone with knowledge of AJAX should be able to answer easily. However, despite searching online, I haven't found an explanation that fits what I am looking for. I'm currently working on a site without any prior ...

Is there a way to show a completely different webpage when someone accesses it from a mobile or tablet device

When a user accesses the website from a large screen device like a computer or smart TV, it will display controls optimized for that specific screen resolution. Conversely, when the user uses a mobile device to surf the same page, the controls will adjus ...

Embed HTML code into a React/Next.js website

I've been given the task of enhancing the UI/UX for an external service built on React (Next.js). The company has informed me that they only allow customization through a JavaScript text editor and injecting changes there. However, I'm having tro ...

The radio button is not providing the necessary notification

I currently have the following elements on my webpage: Table rows that contain radio buttons A link labeled "Issue" that triggers a popup with one submit button A submit button labeled "details" that also triggers a popup The issue I am facing is as fol ...

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

issues with passing values on second click using ajax and jquery

Just starting out with JavaScript, jQuery, and AJAX and running into issues with a basic script to load more data from a database upon button clicks. The first load more button click works fine. But subsequent clicks do not pass values and do not execute. ...

Exploring the world of Javascript arrays through looping

I am struggling to troubleshoot my code. My goal is to iterate through arrays and use the if statement to check if the array exists. arr = ["1","2","3","4"]; for (var i = 0; i < arr.length; i++) { if (string != arr[i]) { //do something } } Unf ...

Is it possible to obtain the index of a table row using querySelector?

Is it possible to find the rowIndex of the first occurrence of a table row within the #myTable using JavaScript? http://jsfiddle.net/bobbyrne01/fmj6np6m/1/ html .. <table id="otherTable"></table> <table id="myTable"></table> js ...

Disappearing White spaces in a Java Swing Label with HTML TagsIn a Java

I'm facing an issue where coloring one character in a string causes most of the whitespaces to disappear. I'm puzzled as to why this is happening and if there's a viable solution? map[9] = "# # ...