"Concealing a div based on the toggling of another one - here's

Question

"Concealing a div based on the toggling of another one - here's

Currently, I have a scenario where clicking on an image inside a div triggers the display of another div while simultaneously wanting to hide the original div containing the image. So far, utilizing only the abreInfo() function achieves the desired toggle effect, but I also need to conceal the initial container div when the new one appears. How can this be accomplished?

function abreInfo(event, id) {
    event.preventDefault();
    $("#" + id).toggle("slow");
}

function fechardiv(div) {
    document.getElementById(div).style.display = "none";
}

http://codepen.io/Ryuh/pen/BzaNLL

javascript html css toggle hide

Answer 1

Answer №1

There is a simpler way to achieve this using jQuery:

$('#container').on('click', function() {
  $(this).hide();
  $('#id').show();
});

You can find the full code sample here

Answer 2

There is a simpler way to achieve this using jQuery:

$('#container').on('click', function() {
  $(this).hide();
  $('#id').show();
});

You can find the full code sample here

Answer 3

Answer №2

When you're inside the function abreInfo(), remember to include the line

$(event.currentTarget).closest('div').hide()

.

The .closest() method finds the first ancestor that matches the specified selector. To ensure you target the correct element, it's a good idea to give the container a distinct class.

function abreInfo(event, id) {
    event.preventDefault();
    $("#"+id).toggle("slow");
    $(event.currentTarget).closest('div').hide("slow");
}

Answer 4

When you're inside the function abreInfo(), remember to include the line

$(event.currentTarget).closest('div').hide()

.

The .closest() method finds the first ancestor that matches the specified selector. To ensure you target the correct element, it's a good idea to give the container a distinct class.

function abreInfo(event, id) {
    event.preventDefault();
    $("#"+id).toggle("slow");
    $(event.currentTarget).closest('div').hide("slow");
}

Answer 5

Answer №3

There is no need for the abreInfo() function. If you simply want to show the next div after hiding an image, you can use your function in this way. Additionally, remove the abreInfo() function from the onclick link provided

function fechardiv(div){          
  $("#"+div).hide();
  $("#"+div).next().fadeIn();
}

Answer 6

There is no need for the abreInfo() function. If you simply want to show the next div after hiding an image, you can use your function in this way. Additionally, remove the abreInfo() function from the onclick link provided

function fechardiv(div){          
  $("#"+div).hide();
  $("#"+div).next().fadeIn();
}

"Concealing a div based on the toggling of another one - here's

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to organize two different menu types - one based on ID and the other in a more traditional format - in order to create

Maintaining the integrity of a list within a for loop

Utilizing Filters to Dynamically Highlight and Unhighlight HTML in Angular

A glitch in showcasing the hello world example in Node.js with express

Enhance TinyMCE functionality to permit text as a primary element within <table> or <tr> tags

Having trouble clearing the interval after setting it?

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

Displaying individual attributes of objects through v-for loop

Make the pie charts created by progressbar.js larger by increasing their width and height

React - group several elements within a wrapping container

Different Options Instead of Using Anchor Tags in HTML

Issue with integrating SQL and PHP/HTML using a web form

A more efficient approach to creating a personalized design

How to Use Express.js to Stream Assets (JS/CSS/images) from Amazon S3

Populating form inputs with FCKeditor content prior to form submission

The use of a custom padding on a text input with the Bootstrap 3 form-control class can cause the text to be hidden

Various hues blending and intertwining with one another

Automatically redirect to a different page upon clicking the jquery popup button

Utilize Node Package to Dispatch Firebase Push Notifications