CODEWITHSUNDEEP
jqueryhtmlcsstransition
user801347
user801347

Reputation: 1373

Problems with Sliding a 'cookie policy' div into view

I'm trying to create a simple 'slide-up' area (e.g. for cookie policy text) triggered by clicking a link. But my code has 2 problems:

1) The display text includes a hyperlink (targetting a new window) but when I return to the original window the slide-up is closed (it should be still open.

2) The 'Close' button does not work.

My code is: CSS:

#cookieNote {
  position: absolute;
  width: 100%;
  height: 5em;
  bottom: 0;
  overflow: hidden;
  background-color: #000; color: #FFF;
  text-align:center;
  transition: all 2s;
}

#cookieNote.closed {
  bottom: -5em;
  height: 0;
}

HTML:

<button class="trigger">
  Open it
</button>
<div id="cookieNote" class="closed">Leave it<br/>
new line with link <a href="http://google.com" target="_blank">google </a><br/>
with close button 
<button class="trigger">
  Close it
</button>
</div>

Javescript:

$('.trigger, #cookieNote').click(function() {
  $('#cookieNote').toggleClass('closed');
});

Upvotes: 0

Views: 27

Answers (1)

Jerd
Jerd

Reputation: 116

The second .trigger is a child of #cookieNote.

When you click the close button it's firing the function twice, so it opens and closes too quickly to notice anything. removing the trigger class off the second button would fix the issue if you want to still keep the whole #cookieNote as a trigger.

This is also why the hyperlink closes the cookie notice. They hyperlink is a inside #cookieNote which triggers the function.

Edit:

Using .not() is an easy way to fix the issue. http://api.jquery.com/not/

$('.trigger, #cookieNote').not('#cookieNote .trigger').click(function() {
  $('#cookieNote').toggleClass('closed');
});

Upvotes: 1

Related Questions