support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by NebulousDiscoverer901

From Stack Overflow

Why aren't my jQuery hide/show events affecting the paragraphs inside <article id="main">?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm trying to use jQuery to hide and show the

elements within

, but when I click the Hide button, nothing happens. I'm relatively new to JavaScript, so I might be overlooking something. I have included the two

I even tried changing the selector from #main to p#main, but that didn’t work either.

Here's my current code:

JAVASCRIPT
function remove() {
  $('#hide').click(function() {
    $('#main').hide();
  });
}

function display() {
  $
}```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="wrapper">

  <h1>Learning How to Use jQuery</h1>

  <article id="main">

    <p>I know how to create HTML pages.</p>
    <p>I know how to style webpages with CSS.</p>
    <p>I know how to add functionality to webpages with JavaScript.</p>
    <p>I understand how to use the jQuery library.</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

  </article>

  <footer>
    <p>Student's Name: Moses Saygbe</p>
    <p>The latest version of jQuery is: </p>
    <p>Resource used to complete this assignment: </p>
  </footer>

</div>```

When I preview my HTML file, clicking the Hide button doesn't hide the article or its <p> elements. Any help to fix this issue would be greatly appreciated!

Comments 0

•

Answers 3

•

3 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is an explanation and a corrected example. The issues in your code are:

The event binding is done inside the function remove(), but that function isn’t being executed.
If you want to hide all the
elements inside the
, the proper selector is "#main p" (i.e. all
elements within an element with id="main"). Using "p#main" looks for a
that has the id "main", which is not what you want.
You should ensure the DOM is ready before binding events.

Try updating your code as follows:

JavaScript

JAVASCRIPT
$(document).ready(function() {
  // Hide the paragraph elements inside the article when the hide button is clicked.
  $('#hide').click(function() {
    $('#main p').hide();  // hides only the <p> elements within #main
  });

  // Show the paragraph elements inside the article when the show button is clicked.
  $('#show').click(function() {
    $('#main p').show();
  });
});

HTML

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Hide/Show Example</title>
</head>
<body>

  <div id="wrapper">

    <h1>Learning How to Use jQuery</h1>

    <article id="main">

      <p>I know how to create HTML pages.</p>
      <p>I know how to style webpages with CSS.</p>
      <p>I know how to add functionality to webpages with JavaScript.</p>
      <p>I understand how to use the jQuery library.</p>

      <button id="hide">Hide</button>
      <button id="show">Show</button>

    </article>

    <footer>
      <p>Student's Name: Moses Saygbe</p>
      <p>The latest version of jQuery is: </p>
      <p>Resource used to complete this assignment: </p>
    </footer>

  </div>

  <!-- Include jQuery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <!-- Include your JavaScript code -->
  <script src="path/to/your/script.js"></script>
</body>
</html>

Explanation

The code is wrapped in the $(document).ready() block. This ensures that the HTML is fully loaded before any event bindings are applied.
The selector $('#main p') targets all <p> elements inside <article id="main"> instead of p#main, which would look for a <p> element with the id main.
The event listeners for both the hide and show buttons are attached directly inside the ready block, and the functions are executed when the buttons are clicked.

This should make your hide and show functionality work as expected.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by VoidCaptain492 • 1 month ago

The main issue with your code is that you've defined the remove() method, but it's never called anywhere. Also, that function just defines an event handler on the #hide button.

jQuery selectors follow the same syntax as CSS, so to select the p elements within #main the selector is #main p, not p#main. I'd suggest reviewing CSS selector rule syntax.

Finally, define a 'document ready' handler in your jQuery code. You can put any code which interacts with the DOM within this function. If your code is referenced within a script tag just before </body> it's not necessarily required that you do this, but it's just good practice to do it to avoid any issues arising if you rearrange your HTML in the future.

From there you can simply define your button click event handlers to show/hide the #main div as required.

Here's a working example of the above changes:

JAVASCRIPT
jQuery($ => {
  $('#hide').on('click', function() {
    $('#main p').hide();
  });

  $('#show').on('click', function() {
    $('#main p').show();
  });
});

HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Learning How to Use jQuery</h1>

  <article id="main">
    <p>I know how to create HTML pages.</p>
    <p>I know how to style webpages with CSS.</p>
    <p>I know how to add functionality to webpages with JavaScript.</p>
    <p>I understand how to use the jQuery library.</p>
    
    <button id="hide">Hide</button>
    <button id="show">Show</button>
  </article>

  <footer>
    <p>Student's Name: Moses Saygbe</p>
    <p>The latest version of jQuery is: </p>
    <p>Resource used to complete this assignment: </p>
  </footer>
</div>

No comments yet.

Answer by CosmicDiscoverer052 • 1 month ago

You don't need JavaScript for this. You can use a checkbox that is checked/unchecked and the following CSS selector: article:has(input[name="visibility"]:checked) > p.

CSS
article:has(input[name="visibility"]) > p {
  display: none;
}

article:has(input[name="visibility"]:checked) > p {
  display: block;
}

input[name="visibility"] {
  display: none;
}

label span {
  background: silver;
  border: solid thin black;
  border-radius: .2em;
}

input~span:nth-child(even) {
  display: inline;
}

input~span:nth-child(odd) {
  display: none;
}

input:checked~span:nth-child(even) {
  display: none;
}

input:checked~span:nth-child(odd) {
  display: inline;
}

HTML
<div id="wrapper">
  <h1>Learning How to Use jQuery</h1>

  <article>
    <p>I know how to create HTML pages.</p>
    <p>I know how to style webpages with CSS.</p>
    <p>I know how to add functionality to webpages with JavaScript.</p>
    <p>I understand how to use the jQuery library.</p>
    <label>
      <input name="visibility" type="checkbox" checked>
      <span>Show</span>
      <span>Hide</span>
    </label>
  </article>

  <footer>
    <p>Student's Name: Moses Saygbe</p>
    <p>The latest version of jQuery is: </p>
    <p>Resource used to complete this assignment: </p>
  </footer>
</div>

Run code snippetHide resultsExpand snippet

No comments yet.

Discussion

No comments yet.

Why aren't my jQuery hide/show events affecting the paragraphs inside <article id="main">?

3 Answers

JavaScript

HTML

Explanation

Discussion

Similar Posts

How can I programmatically insert text into a Lexical Editor in React without losing focus?

Stripe Checkout Auto Tax Calculation Fails with Multiple Payment Methods in Next.js