Add HTML or append a child element when clicking, then remove it from the previously clicked element

Question

Add HTML or append a child element when clicking, then remove it from the previously clicked element

Within a container, I have several div elements where .div-to-hide is shown by default and .div-to-show is hidden.

My goal is to toggle the visibility of these elements - when clicking on a .set, .div-to-hide should hide and .div-to-show should become visible. Subsequent clicks should revert the previously clicked element to its original state.

Additionally, I want to display two buttons inside each .div-to-show.

<div class="container">
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
</div>

This is my current code snippet:

let lastClicked;
$('.container').on('click', function(e) {
  if (this == lastClicked) {
    lastClicked = '';
    $('.div-to-hide').show();
    $(this).children('.div-to-hide').hide();
  } else {
    lastClicked = this;
    $('.div-to-hide').hide();
    $(this).children('.div-to-hide').show();
    $(this).children('.div-to-show').hide();
  }
});

I'm facing some issues with making it work as intended. Any assistance would be greatly appreciated!

UPDATE: I managed to fix it! Thanks for all the help!

javascript jquery html css

Answer 1

Answer №1

To start off, it appears that you are not utilizing delegation (the second parameter on the $.on() function) to specify the .set element as your current context (this) within the function.

If my understanding is accurate, your objective is to display the elements corresponding to the last clicked item while hiding the others. It's worth noting that knowing the exact last clicked element may not be necessary for achieving this.

$('.container').on('click', '.set', function (e) {
    // At this point, "this" refers to the clicked .set element
    var $this = $(this);
    // We identify the specific children of .set that we would like to manipulate
    var $div_to_hide = $this.find(".div-to-hide");
    var $div_to_show = $this.find(".div-to-show");

    // If the targeted section is already visible, no further action is required
    if ($div_to_show.is(":visible")) {
        $div_to_hide.show();
        $div_to_show.hide();
    }

    // Now let's select the other .sets 
    var $other_sets = $this.siblings(".set");

    // Alternatively, consider this method for handling more complex hierarchies. Uncomment if needed
    // var $other_sets = $this.closest(".container").find(".set").not(this);

    // We reset ALL other sets
    $other_sets.find(".div-to-show").hide();
    $other_sets.find(".div-to-hide").show();
});

Answer 2

To start off, it appears that you are not utilizing delegation (the second parameter on the $.on() function) to specify the .set element as your current context (this) within the function.

If my understanding is accurate, your objective is to display the elements corresponding to the last clicked item while hiding the others. It's worth noting that knowing the exact last clicked element may not be necessary for achieving this.

$('.container').on('click', '.set', function (e) {
    // At this point, "this" refers to the clicked .set element
    var $this = $(this);
    // We identify the specific children of .set that we would like to manipulate
    var $div_to_hide = $this.find(".div-to-hide");
    var $div_to_show = $this.find(".div-to-show");

    // If the targeted section is already visible, no further action is required
    if ($div_to_show.is(":visible")) {
        $div_to_hide.show();
        $div_to_show.hide();
    }

    // Now let's select the other .sets 
    var $other_sets = $this.siblings(".set");

    // Alternatively, consider this method for handling more complex hierarchies. Uncomment if needed
    // var $other_sets = $this.closest(".container").find(".set").not(this);

    // We reset ALL other sets
    $other_sets.find(".div-to-show").hide();
    $other_sets.find(".div-to-hide").show();
});

Answer 3

Answer №2

Consider utilizing class toggling as an alternative method.

$('.set').on('click', function(e) {
  $('.set').removeClass('hidden-child');
  $(this).addClass('hidden-child');
});

CSS:

.hidden-child .div-to-hide, .div-to-show {
  display: none;
}
.hidden-child .div-to-show, .div-to-hide {
  display: block;
}

This approach will enhance the clarity and logic of your code, allowing the CSS to manage the display rules effectively.

Edit: Adjusted class name for better understanding; provided further explanation; ensured answer alignment with question requirements

Answer 4

Consider utilizing class toggling as an alternative method.

$('.set').on('click', function(e) {
  $('.set').removeClass('hidden-child');
  $(this).addClass('hidden-child');
});

CSS:

.hidden-child .div-to-hide, .div-to-show {
  display: none;
}
.hidden-child .div-to-show, .div-to-hide {
  display: block;
}

This approach will enhance the clarity and logic of your code, allowing the CSS to manage the display rules effectively.

Edit: Adjusted class name for better understanding; provided further explanation; ensured answer alignment with question requirements

Answer 5

Answer №3

Utilize siblings() jQuery function to alternate the visibility of other divs and leverage toggle() jQuery method to display or hide itself. Additionally, ensure to apply the click() event on the .set class instead of the .container.

$(document).on('click', '.set', function(e) {
  $(this).find('.hide').toggle();
  $(this).find('.show').toggle();
  $(this).siblings('.set').find('.hide').show();
  $(this).siblings('.set').find('.show').hide();
});

.show {
  display: none;
}

.set div {
  padding: 10px;
  font: 13px Verdana;
  font-weight: bold;
  background: red;
  color: #ffffff;
  margin-bottom: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="set">
    <div class="hide">1 Hide</div>
    <div class="show">1 Show</div>
  </div>
  <div class="set">
    <div class="hide">2 Hide</div>
    <div class="show">2 Show</div>
  </div>
  <div class="set">
    <div class="hide">3 Hide</div>
    <div class="show">3 Show</div>
  </div>
</div>

Answer 6

Utilize siblings() jQuery function to alternate the visibility of other divs and leverage toggle() jQuery method to display or hide itself. Additionally, ensure to apply the click() event on the .set class instead of the .container.

$(document).on('click', '.set', function(e) {
  $(this).find('.hide').toggle();
  $(this).find('.show').toggle();
  $(this).siblings('.set').find('.hide').show();
  $(this).siblings('.set').find('.show').hide();
});

.show {
  display: none;
}

.set div {
  padding: 10px;
  font: 13px Verdana;
  font-weight: bold;
  background: red;
  color: #ffffff;
  margin-bottom: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="set">
    <div class="hide">1 Hide</div>
    <div class="show">1 Show</div>
  </div>
  <div class="set">
    <div class="hide">2 Hide</div>
    <div class="show">2 Show</div>
  </div>
  <div class="set">
    <div class="hide">3 Hide</div>
    <div class="show">3 Show</div>
  </div>
</div>

Add HTML or append a child element when clicking, then remove it from the previously clicked element

Answer №1

Answer №2

Answer №3

Similar questions

Strange Behavior of Zoom DIV Effect during Rapid Hovering

Code activates the wrong function

Responsive Design and Advertising with CSS Media Queries

How do I use jQuery to target a specific list item based on its data attribute and the ID of the list it belongs to?

Prevent multer from uploading files if the field is left blank

AngularJS data retrieval timeout function

Utilizing BeautifulSoup for Web Scraping (handling missing values during the scrape)

a guide on incorporating PHP variables into Bootstrap Full Calendar

Reducing Time Series Data: Comparing Average vs Largest-Triangle-Three-Buckets Technique

The CSS animation will run infinitely, but the desire is for it to only complete one iteration

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

The battle between Hover, Focus, and Blur modes intensifies

Customize React JS Material UI's InputBase to be responsive

Having trouble displaying my klout score with ajax

Highcharts Date Confusion

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Changing a class and audio and storing it using browser's local storage

Creating a masonry layout with uniform row heights

Different approach to reach AngularJS isolated scope

Application Path-related Relative Path Problem in MVC Deployment