jQuery button click not showing/hiding content

I just started working with Javascript, and I'm unable to get the <p>p elements in <article id="main">article.

Again, I'm new so sorry in advance for my lack of knowledge. I have added the 2 <script> at the bottom of the body element to connect the JS to the HTML.

Here's where I'm at:

Html code:

<!DOCTYPE html>
<!-- 
    Student Name: Moses Saygbe
    File Name: index.html
    Current Date: 01/31/2025
 -->
<html lang="en">
<head>
 
    <title>Chapter 10, Extend</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">

</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>
    <script src="scripts/script.js"></script>
    <script src="jquery-3.7.1.min.js"></script>
</body>
</html>

I have tried replacing the #main with ('p#main')with no luck still.

.JS code:

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

} 

function display() {
    $
}

When I preview the Html file, the Hide button doen't hide the article or the p elements.

Solution

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:

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

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

<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>