Displaying a division when a button is pressed

Question

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed.

<button id="showButton" type="button">Show More</button>

<div id="container">
    <div id="fourthArticle">
        <img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span>
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>

    <div id="fifthArticle">
        <img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span>   
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>

    <div id="sixthArticle">
        <img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span> 
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

$('#showButton').click(function () {
    $('#container').toggleClass('hidden');  
}

</script>

Regardless of my troubleshooting attempts, clicking the button does not trigger any changes. Even inserting an alert in the .click function did not work as expected. It seems like something is amiss here, but I'm at a loss as to where the issue lies.

javascript jquery html css

Answer 1

Answer №1

Please ensure that your container div is properly closed with a closing tag </div>.
Check that your event handler is correctly closed.

$(function() {
  $('#showButton').click(function() {
    $('#container').toggleClass("hidden");
  });
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showButton" type="button">Show More</button>

<div id="container">
  <div id="fourthArticle">
    <img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span>
      this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="fifthArticle">
    <img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="sixthArticle">
    <img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>
</div>

Answer 2

Please ensure that your container div is properly closed with a closing tag </div>.
Check that your event handler is correctly closed.

$(function() {
  $('#showButton').click(function() {
    $('#container').toggleClass("hidden");
  });
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showButton" type="button">Show More</button>

<div id="container">
  <div id="fourthArticle">
    <img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span>
      this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="fifthArticle">
    <img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="sixthArticle">
    <img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>
</div>

Answer 3

Answer №2

If you're having trouble with your Jquery code, make sure to check out this helpful example: https://jsfiddle.net/bv5fLrth/18/

One important thing to remember is to always close your functions properly with a ');' at the end.

Make sure not to forget this step in your code:

$('#showButton').click(function () {
    $('#container').toggleClass('hidden');  
});
);

Answer 4

If you're having trouble with your Jquery code, make sure to check out this helpful example: https://jsfiddle.net/bv5fLrth/18/

One important thing to remember is to always close your functions properly with a ');' at the end.

Make sure not to forget this step in your code:

$('#showButton').click(function () {
    $('#container').toggleClass('hidden');  
});
);

Answer 5

Answer №3

The visibility of the hidden class in your CSS will determine the outcome. You may want to consider applying the display none property to the container element like this...

#container {
    display: none;
}

Next, ensure that your script includes the slideToggle method within a document ready function and that the jQuery syntax is accurate as shown below...

$(document).ready(function() {
  $('#showButton').click(function() {
    $('#container').slideToggle('fast');
  });
});

Answer 6

The visibility of the hidden class in your CSS will determine the outcome. You may want to consider applying the display none property to the container element like this...

#container {
    display: none;
}

Next, ensure that your script includes the slideToggle method within a document ready function and that the jQuery syntax is accurate as shown below...

$(document).ready(function() {
  $('#showButton').click(function() {
    $('#container').slideToggle('fast');
  });
});

Answer 7

Answer №4

This code snippet utilizes jQuery for functionality.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$('#toggleBtn').click(function () {
    $('#content').toggleClass('hidden');  
});

<button id="toggleBtn">Toggle Content</button>
<div id="content">
    <div>
        Content Block One
    </div>
    <div>
        Content Block Two
    </div>
    <div>
        Content Block Three
    </div>
</div>

Answer 8

This code snippet utilizes jQuery for functionality.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$('#toggleBtn').click(function () {
    $('#content').toggleClass('hidden');  
});

<button id="toggleBtn">Toggle Content</button>
<div id="content">
    <div>
        Content Block One
    </div>
    <div>
        Content Block Two
    </div>
    <div>
        Content Block Three
    </div>
</div>

Displaying a division when a button is pressed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The button in discord.js is unresponsive and does not seem to be

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Protractor performs the afterEach function prior to the expectations being met

Arranging Vue numbers

What techniques do platforms like Twitch, YouTube, Twitter, and Reddit use to dynamically load pages and update the URL without triggering a full reload?

Harnessing the power of lazysizes with WebP

What types of data are best suited for storage in localStorage?

How can I use JQuery to enable or disable checkboxes upon loading?

Exploring React-Query's Search Feature

Repeated Values Issue in Material Ui List Function

Issues persist with the textarea failing to update the longtext data field

"Utilizing jQuery to apply a class based on the attributes of CSS

What could be the reason for TypeScript being unable to recognize my function?

How to refresh a page in React when the browser's back button is pressed

Incorporating Ruby on Rails: Sending a fresh POST request to API and instantly

Using the power of jQuery to load Ajax content, unfortunately, the content remains

javascript - Utilizing the latest ES6 syntax

Padding on a flex item nudges a neighboring flex item out of place

Utilizing the after pseudo element for an active selector in CSS

Insert a new key/value pair into a designated object in Javascript