Hide div by clicking another div jQuery

Question

I have a div which when clicked, height changes so that the rest of the content becomes visible. But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working. Here is the code:

 $('.scrollClick').click(function() { $(this).css("height", "350px"); }); $('.acceptCta').click(function() { $('.scrollClick').css("height", "27px"); });

 .scrollClick{ font-family:inherit; background-color: #000E52; color: #fff; text-align: center; display: inline-block; position: fixed; z-index: 9999; cursor: pointer; right: 20px; padding: 5px; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0,0,0,0.4); transition: all 0.5s ease; font-size: 16px; max-width: 240px; box-sizing: border-box; text-align: center; height: 27px; overflow: hidden; }.dropContentBox{ display: inline-block; color: #fff; transition: all 0.5s ease; text-align: center; }.acceptCta{ display: inline-block; position: relative; background-color: #7CBD2B; color: #333; font-size: 14px; font-weight: 600; padding: 10px 25px; box-sizing: border-box; border-radius: 3px; box-shadow: 2px 2px 2px rgba(0,0,0,0.15); transition: all 0.5s ease; z-index:10; }.acceptCta:hover{ background-color: #88D41B; }.acceptCta:hover.arrow{ opacity: 1.0; }.arrow { border: solid #333; border-width: 0 3px 3px 0; display: inline-block; opacity: 0; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: all 0.5s ease; }.bouncer { position: relative; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: border-color 0.5s ease; animation: bouncer 2s infinite; } @keyframes bouncer { 0% { bottom: 0px; } 20% { bottom: 7px; } 40% { bottom: 0px; } 60% { bottom: 7px; } 80% { bottom: 0px; } 100% { bottom: 0px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="scrollClick"> Viktig informasjon; Les her&ensp.<i class="bouncer"></i> <div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no?png;$banner$"> <div class="acceptCta">Jeg har lest og forstått&ensp;<i class="arrow"></i></div> </div> </div> </div>

So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div. What am I doing wrong? Ty

Answer 1

The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.

$('.scrollClick').click(function() {
  $(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
  e.stopPropagation();
  $('.scrollClick').css("height", "27px");
});