CODEWITHSUNDEEP
javascriptjqueryhtmlcss
simon schaminee
simon schaminee

Reputation: 49

jQuery hide multiple divs on click

Whenever I click on "click hier" the div with class "cirkel1" and the div with class "bewegendetekst" show up. But when I want to click "click back" they won't disappear.

I tried to use the toggle function but that only made things worse.

So my question is how do I make the div with class "cirkel1" and the div with class "bewegendetekst" disappear when I click on "click back"

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });
});

$(document).ready(function() {
  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });
});


$(document).ready(function() {
  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });
});

$(document).ready(function() {
  $(".witte-tekst").click(function() {
    $(".cirkel1").show("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});
.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

Upvotes: 3

Views: 144

Answers (3)

prasanth
prasanth

Reputation: 22490

Its will hide back again to click

 $(".witte-tekst").click(function() {
        $(".cirkel1").toggle( "slow" );
});

Upvotes: 0

Saad Suri
Saad Suri

Reputation: 1382

hide() function is use to hide like

$('#yourdiv').hide();

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Use jQuery toggle() method to show/hide circle when you click Click Back button :

$(".witte-tekst").click(function() {
   $(".cirkel1").toggle("slow");
})

NOTE : One ready function is enough.

Hope this helps.

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });

  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });


  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });

  $(".witte-tekst").click(function() {
    $(".cirkel1").toggle("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});
.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

Upvotes: 1

Related Questions