CODEWITHSUNDEEP
javascriptjquery
Eugenio
Eugenio

Reputation: 489

Toggle after clicking twice

I have a JAVASCRIPT function to change few things after clicking a shape called Hexagon, as you can see here:

JAVASCRIPT

$( ".hexagon1").on("click", function() {
  $( "#hex-area-2" ).css('display','block');
  $( "#hex-area-2" ).css('transition','display 1s ease-in');
  $( "#left-line-animated-container-left").css('display','block');
  $( "#left-line-animated-container-right").css('display','block');
  $( "#left-line-animated-container-center").css('display','block');
  $( "#hex-area-1").css('height','300px');
  $( "#hex-area-centralizer").css('height','300px');
});

On click, all that stuff changes, but what If I want to restore original values if I click again this Hexagon? there's a way to do it with javascript?

Upvotes: 0

Views: 61

Answers (4)

War10ck
War10ck

Reputation: 12508

I would use CSS classes for this. Assign the default CSS to the particular id's and then toggle a class on the body and let the modified CSS properties cascade down to their appropriate elements:

/* Default CSS */
#hex-area-2 {
    ...
}
#left-line-animated-container-left {
    ...
}
#left-line-animated-container-right {
    ...
}
#left-line-animated-container-center {
    ...
}
#hex-area-1 {
    ...
}
#hex-area-centralizer {
    ...
}

/* CSS applied on click */
.hex1-toggle #hex-area-2 {
    display: block;
    transition: display 1s ease-in;
}
.hex1-toggle #left-line-animated-container-left,
.hex1-toggle #left-line-animated-container-right,
.hex1-toggle #left-line-animated-container-center {
    display: block;
}
.hex1-toggle #hex-area-1,
.hex1-toggle #hex-area-centralizer {
    height: 300px;
}

$( ".hexagon1").on("click", function() {
    $('body').toggleClass('hex1-toggle');
});

This "cascading" effect is the "C" in CSS. By toggling the one class on the body, the stylesheet will effectively cascade the resulting changes when the DOM redraw is triggered. Note that the hex1-toggle class in this case does not have to be at the body level. It could and probably should be at the closest parent, grandparent, etc. element to all of the elements that you're wanting to modify. It was placed at the body level in the case of this demo simply because no HTML structure was supplied in the question and I chose not to infer.

Upvotes: 2

koolhuman
koolhuman

Reputation: 1651

Make classes for all your CSS and then onclick just toggle those classes.

Eg:

.hex-area-2{
  display:block;
}

$( ".hexagon1").on("click", function() {
    $( "#hex-area-2" ).toggleClass("hex-area-2");
});

Upvotes: 1

Adam
Adam

Reputation: 1304

var i = 1;
$( ".hexagon1").on("click", function() {
  if(i === 1) {
    $( "#hex-area-2" ).css('display','block');
    $( "#hex-area-2" ).css('transition','display 1s ease-in');
    $( "#left-line-animated-container-left").css('display','block');
    $( "#left-line-animated-container-right").css('display','block');
    $( "#left-line-animated-container-center").css('display','block');
    $( "#hex-area-1").css('height','300px');
    $( "#hex-area-centralizer").css('height','300px');
  } else {
    $( "#hex-area-2" ).removeAttr('style');
    $( "#left-line-animated-container-left").removeAttr('style');
    $( "#left-line-animated-container-right").removeAttr('style');
    $( "#left-line-animated-container-center").removeAttr('style');
    $( "#hex-area-1").removeAttr('style');
    $( "#hex-area-centralizer").removeAttr('style');
  }
  $i++; // add 1 to i
  $i = ($i === 3) ? 1 : $i; // if i is now 3 reset to 1
});

.removeAttr('style'); will remove inline styles on the elements. If you have set styles in a CSS stylesheet, and then the jQuery above adds inline styles, as this removes the entire style="" attribute, it should reset all the styles back to what they were.

Upvotes: 0

codestr
codestr

Reputation: 201

I believe you could set up the functions similar to this: 

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $( "#hex-area-2" ).css('display','block');
      $( "#hex-area-2" ).css('transition','display 1s ease-in');
      $( "#left-line-animated-container-left").css('display','block');
      $( "#left-line-animated-container-right").css('display','block');
      $( "#left-line-animated-container-center").css('display','block');
      $( "#hex-area-1").css('height','300px');
      $( "#hex-area-centralizer").css('height','300px');
    }, function() {
      // second click stuff here
    });
  });
</script>

Alternatively to having all the actions in the function, you could just make a style for each toggle state and add/remove them as needed.

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $('hexagon1').addClass('className');
    }, function() {
      $('hexagon1').removeClass('className');
    });
  });
</script>

Upvotes: 0

Related Questions