CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-position
Bender
Bender

Reputation: 87

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().

Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.

I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/

What would be the best way to make the arrow point down after the button is clicked?

Upvotes: 1

Views: 1588

Answers (3)

Moddinu
Moddinu

Reputation: 185

I would add a class rotate on click then apply the following css :

#makeGroupButton.rotate span:after  {
    top: 0px;
    -webkit-transform: rotate(-228deg) !important;
}

I have update your js fiddle https://jsfiddle.net/414mwv17/2/.

A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.

Hope this helps

Upvotes: 1

Scott
Scott

Reputation: 21882

Create a new class for how you want the carat to appear :

#makeGroupButton span.rotate:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(135deg);
}

Note the class addition in the selector.

Then change the javascript/jQuery to just toggle that class:

 $('#makeGroupButton').bind('click', function(){
     $('#slideout').slideToggle(500);
     $(this).children('span').toggleClass('rotate');
  });

You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.

Updated fiddle

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

Have started it for you to build on. Check this out and let me know your feedback. Thanks!

Added the following style:

#makeGroupButton span.open:after {
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  margin-top: -15px;
}

and some js too:

$('#makeGroupButton').bind('click', function(event) {
  event.preventDefault();
  $('#slideout').slideToggle(500);
  $(this).find('span').toggleClass('open');
});
#wrapper{
  height: 500px;
  width: 300px;
  position:relative;
  border: 2px solid blue;
}

#slideout {
  height: 95%;
  width: 95%;
  border: 2px solid red;
  position: absolute;
  bottom: 0;
  left: 2.5%;
}

#makeGroupButton
{
  clear: both;
  text-align: center;
  color: white;
  width: 220px;
  background:black;
  overflow: hidden;
  transition: all 0.5s;
}

#makeGroupButton:hover, #makeGroupButton:active 
{
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}

#makeGroupButton span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  transition: padding-right 0.5s;
}

#makeGroupButton span:after 
{
  content: '';  
  position: absolute;
  top: 0;
  right: -20px;
  opacity: 0;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-bottom: none;
  border-left: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-45deg);
}

#makeGroupButton:hover span, #makeGroupButton:active span 
{
  padding-right: 30px;
}

#makeGroupButton:hover span:after, #makeGroupButton:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: white;
  right: 0;
  top: 50%;
}

#makeGroupButton span.open:after {
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
  <span>New Group</span>
</a>

Upvotes: 1

Related Questions