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

Could you provide me with a demonstration of cross-domain functionality?

Embedding Facebook data into an HTML document

AngularJS: Modifying values in one div updates data in all other divs

Using AJAX to call a PHP function and transferring the resulting value to a specific div element

Showing a PDF from a shared folder on a network using AJAX in HTML5

Issues with jwplayer functionality

Tips for moving an input bar aside to make room for another

Creating an HTML table from dynamic JSON data - A comprehensive guide

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Why is applying CSS on an li element using .css() in JQuery not functioning?

Change the order of numbering in ordered lists

Getting 100% height on floated neighboring divs: Tips and tricks

Using jQuery to alter the background position of multiple backgrounds in CSS

Tips for styling the four DIV elements on a website's homepage with CSS

Find the string "s" within a div element aligned vertically, using Popper

Error in Chrome: Uncaught TypeError with JQuery Ajax - Unable to access property 'data' when null

Encountering Internal Server Error when C# WebMethod communicates with JavaScript AJAX call

Error Encountered: Anticipated 'styles' to consist of a series of string elements

Utilizing the setTimeout method in jQuery for multiple calls

Convert a fixed Jquery div to absolute positioning when it reaches the end of the page