How to hide a div when another toggles?

Question

I have an image inside a div that on click toggles another div and I want to hide the div that contains the image when the new div appears. When I use only the abreInfo() it works, but I also want to hide the container div. How can I do it?

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

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

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

Answer 1

You can do it just with jQuery more easier like this:

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

Full code here https://jsfiddle.net/yLhq7ga6/

Answer 2

Inside abreInfo() add $(event.currentTarget).closest('div').hide() .

.closest() gets the first ancestor that matches the selector. I'd make sure the container has a class, to make sure you hit the right element.

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

Answer 3

No need for abreInfo() function. If you just want to display next div after hiding image. Just use your function like this. Also remove abreInfo() function from onclick like this

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