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

AngularJS Login Popup with SpringSecurity

Manipulating selected values in VueJs v-select using methods

ShadowBox replacement for IE8

Having trouble retrieving the attribute of an appended element in jQuery?

Has jQuery UI Accordion taken over the design of unordered lists?

How can I maintain the state of an HTML checkbox in Django even after reloading the page?

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

Error: Attempting to access index '0' of an undefined property in firebase and vuex

Steps to establish a maximum font size for my buttons

Adjusting the Materui LinearProgressWithLabel progress value to reflect a custom value

Examining the appearance of react-hot-toast using jest testing

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

How can I utilize jQuery to add tags in a box?

Is it possible to incorporate a different website font into an email template?

I'm curious about the potential vulnerabilities that could arise from using a Secret key as configuration in an express-session

"Using Node.js Express 4.4 to efficiently upload files and store them in a dynamically

Database-driven menu selection

Unable to fetch any attributes for the <table> element with Ajax

Content OverFlow: DropDown Menu is not overlapping the content, but rather pushing it downwards