AppendTo() element, jQuery CSS class change not working

Question

I have a issue that I can't figure out for days now. I have two elements, logo & "Go Back" button in my header.

Now, I want those two elements to do exactly the same thing. On click, show the same drop down. I don't want to replicate my code so I am trying to move the element and assign correct classes on click.

I managed to move my element on click properly, however on one element the display: none is not changing and I am really confused why not.

I want the drop down to appear under the element that was clicked. So, if you click the "logo", the drop-down will be moved to "logo" element and will appear under the logo, if the "go back" is clicked, the drop-down will be moved to "go back" element and appear under that element.

On click, the elements change so they look exactly the same, however, the display: none property wont change on the "Go back" element. Can anyone tell me why?

jQuery("#checkout-header-count").click(function() {
  jQuery("#checkout-header-logo").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-count").addClass("checkout-prepend-dropdown");
  jQuery(".checkout-prepend-dropdown-content").appendTo(jQuery("#checkout-header-count"));
});

jQuery("#checkout-header-logo").click(function() {
  jQuery("#checkout-header-count").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-logo").addClass("checkout-prepend-dropdown");
  jQuery(".checkout-prepend-dropdown-content").appendTo(jQuery("#checkout-header-logo"));
});

jQuery(".checkout-prepend-dropdown").click(function() {
  if (jQuery(".checkout-prepend-dropdown-content").css('display') == 'block') {
    jQuery(".checkout-prepend-dropdown-content").css("display", "none")
  } else if (jQuery(".checkout-prepend-dropdown-content").css('display') == 'none') {
    jQuery(".checkout-prepend-dropdown-content").css("display", "block");
  }
});

jQuery('.checkout-prepend-dropdown-content').click(function(e) {
  e.stopPropagation();
});
jQuery(".checkout-prepend-dropdown").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  jQuery('.checkout-prepend-dropdown-content').show();
});
jQuery(document).click(function(e) {
  jQuery('.checkout-prepend-dropdown-content').hide();
});
jQuery("#returnCheckout").click(function() {
  jQuery('.checkout-prepend-dropdown-content').hide();
});

.checkout-prepend-dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #4E4D4D;
  color: white;
  left: -70px;
  padding: 10px;
  z-index: 20;
}

.checkout-prepend-dropdown-content>div {
  display: inline-block;
}

.checkout-prepend-dropdown-content>div>a {
  color: #9C2CA8;
}

.checkout-prepend-dropdown-content>div>a:hover {
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="checkout-prepend-wrapper">
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-logo" class="checkout-prepend-dropdown">
    <img src="/media/logo/stores/1/logo_vv.png" alt="Logo" />
    <div class="checkout-prepend-dropdown-content">
      <p>Warning! You are about to leave the checkout!</p>
      <div id="returnCheckout" class="vvButton">Return to checkout</div>
      <div class="vvButton"><a href="/checkout/cart">Go back to basket</a></div>
    </div>
  </div>
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-count">Go back</div>
</div>

Can't figure out what you exactly want but I can see that you attach multiple click event to the same element... example you're attaching three click events to the logo div — Zakaria Acharki
– Zakaria Acharki, Commented Sep 12, 2018 at 11:20
I am sorry that it don't make sense... When you click on the "logo" the drop down appears. When you click on the "Go back" the drop down appears. — Greg
– Greg, Commented Sep 12, 2018 at 11:27

Zakaria Acharki · Accepted Answer · 2018-09-12 13:57:40Z

1

Then you could create a function that does your flow logic and attaches it to the click event of both buttons, like this you'll be sure that the buttons will do the same job :

jQuery("#checkout-header-count, #checkout-header-logo").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    toggleDropdown();
});

$(function() {
  jQuery("#checkout-header-count, #checkout-header-logo").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    toggleDropdown(this);
  });


  jQuery('.checkout-prepend-dropdown-content').click(function(e) {
    e.stopPropagation();
  });

  jQuery(document).click(function(e) {
    jQuery('.checkout-prepend-dropdown-content').hide();
  });
});

function toggleDropdown(clicked_element) {
  jQuery("#checkout-header-logo").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-count").addClass("checkout-prepend-dropdown");

  jQuery(".checkout-prepend-dropdown-content").appendTo($(clicked_element));

  if (jQuery(".checkout-prepend-dropdown-content").is(':visible')) {
    jQuery(".checkout-prepend-dropdown-content").hide();
  } else {
    jQuery(".checkout-prepend-dropdown-content").show();
  }
}

.checkout-prepend-dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #4E4D4D;
  color: white;
  padding: 10px;
  z-index: 20;
}

.checkout-prepend-dropdown-content>div {
  display: inline-block;
}

.checkout-prepend-dropdown-content>div>a {
  color: #9C2CA8;
}

.checkout-prepend-dropdown-content>div>a:hover {
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="checkout-prepend-wrapper">
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-logo" class="checkout-prepend-dropdown">
    <img src="/media/logo/stores/1/logo_vv.png" alt="Logo" />
    <div class="checkout-prepend-dropdown-content">
      <p>Warning! You are about to leave the checkout!</p>
      <div id="returnCheckout" class="vvButton">Return to checkout</div>
      <div class="vvButton"><a href="/checkout/cart">Go back to basket</a></div>
    </div>
  </div>
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-count">Go back
  </div>

edited Sep 12, 2018 at 13:57

answered Sep 12, 2018 at 11:27

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Greg Over a year ago

Oh man! This is what I was trying to achieve for days now!!! I tired all sorts of different ways... You are my hero!

Zakaria Acharki Over a year ago

Glad I could help brother, HAPPY CODING.

Greg Over a year ago

Coding can be very frustrating sometimes haha :) Thank you once more :) enjoy your day!

Greg Over a year ago

Hey, I thought it was the solution, but it came out not to be exactly what I wanted. In your code, which ever element you click, the drop-down will appear under the "go back", however, I want the drop down to appear under which ever element was clicked... If that makes sense... So, if you click the logo, the drop-down will be moved to "logo" element and appear under the logo, if the "go back" is clicked, the drop-down will be moved to "go back" element and appear under that element. Check my snippet now, IO hope it makes more sense now. Sorry to keep bothering you :/

Greg Over a year ago

I have unaccepted your answer so as you are away, someone else might help me out... Sorry :(

|

Collectives™ on Stack Overflow

AppendTo() element, jQuery CSS class change not working

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related