Ways to conceal and reveal content within div elements

Question

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time.

If you would like to view the code, please visit my CodePen link below:

Due to the extensive amount of HTML and CSS in the code, I refrained from sharing the entire content. My primary issue lies with the JavaScript portion.

My objective is as follows:

Upon clicking the 'Section A Book List' button, only the 'PREVIOUS VERSIONS A' and 'NEW VERSIONS A' sections should be visible.

Similarly, when selecting the 'Section B Book List' button, only the 'PREVIOUS VERSIONS B' and 'NEW VERSIONS B' sections should appear.

Regarding the black areas for 'Book 1' and 'Book 2,' I aim to display 'BOOK 1' when 'Book 1' is clicked, and 'BOOK 2' when 'Book 2' is selected.

Essentially, I require some form of conditional show/hide functionality. I attempted to implement this using jQuery in the provided CodePen example, but I encountered difficulties progressing beyond that point.

Your insights are greatly appreciated. While I made an initial effort, I reached an impasse during the process.

jquery html css

Answer 1

Answer №1

To make each section of the book list wrapper unique, you can assign a specific class or id to them. Here's an example:

<div id="bbl-wrapper1">
  <button class="toggle1">Section A Book List </button>
  <button class="toggle2">Section B Book List </button>

  <div class="clearfix" id="section-a">...</div>

  <div class="clearfix" id="section-b">...</div>
</div>

By default, you can hide #section-b:

#section-b {
  display: none;
}

You can use jQuery to control the visibility of each section like this:

$(document).ready(function() {
  var $secA = $("#section-a");
  var $secB = $("#section-b");

  $('.toggle1').click(function() {
    $secA.show();
    $secB.hide();
  });

  $('.toggle2').click(function() {
    $secA.hide();
    $secB.show();
  });
});

The same approach can be applied to manage BOOK 1 and BOOK 2 sections as well.

Note: Avoid using duplicate ids like bbl in your HTML as they must be unique for each element.

Answer 2

To make each section of the book list wrapper unique, you can assign a specific class or id to them. Here's an example:

<div id="bbl-wrapper1">
  <button class="toggle1">Section A Book List </button>
  <button class="toggle2">Section B Book List </button>

  <div class="clearfix" id="section-a">...</div>

  <div class="clearfix" id="section-b">...</div>
</div>

By default, you can hide #section-b:

#section-b {
  display: none;
}

You can use jQuery to control the visibility of each section like this:

$(document).ready(function() {
  var $secA = $("#section-a");
  var $secB = $("#section-b");

  $('.toggle1').click(function() {
    $secA.show();
    $secB.hide();
  });

  $('.toggle2').click(function() {
    $secA.hide();
    $secB.show();
  });
});

The same approach can be applied to manage BOOK 1 and BOOK 2 sections as well.

Note: Avoid using duplicate ids like bbl in your HTML as they must be unique for each element.

Ways to conceal and reveal content within div elements

Answer №1

Similar questions

Determining the width of a window using JavaScript

The Wordpress admin-ajax.php script is failing to process the function and returning a "0" error code

Choose the element that is trapped within the div

Displaying cards horizontally on desktop and vertically on mobile using CSS

"Utilizing jQuery AJAX to enable multiple file uploads with specific file extensions

Deciphering JSON File Paths

How can a callback be properly passed in programming?

Executing jQuery AJAX request twice

Creating a dropdown menu in Bootstrap 4 using JSON information

Ways to make a component gradually appear and disappear in an Angular application

Customizing the Twitter bootstrap navigation in Wordpress

Update the div element without needing to reload the entire page

The request to access /test.php has resulted in an error (404) indicating that the file cannot be found

What is the reason for the successful addition of a list item, using dynamic methods, in Chrome and Firefox while encountering issues in

php code to show data in a single column of a table

Field for user input featuring a button to remove the entry

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Centering all td elements except for those with a specific class

The `background-size` property in jQuery is not functioning as expected

What is the best way to refresh a page during an ajax call while also resetting all form fields?