CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vince Mamba
Vince Mamba

Reputation: 187

Hidden Element slides between another element

I'm trying to create the same effect as found on this site here https://glenner.org/ in the header when you click either the phone or email icon it toggles hidden text to slide. So when you click on the phone icon the text slides between the phone and the email icon.

I have this so far: 

<div id="clickable" style="float:left; cursor:pointer; color: red"><i class="fa fa-phone"></i></div> 
<div id="hidden" style="display:none; white-space:nowrap;">Phone Number</div>

<div id="clickable2" style="float:left; cursor:pointer; color: red"><i class="fa fa-envelope"></i></div> 
<div id="hidden2" style="display:none; white-space:nowrap;">Email Here</div>

//

$('#clickable').click(function() {
    $('#hidden').animate({width:'toggle'},350);
});

$('#clickable2').click(function() {
    $('#hidden2').animate({width:'toggle'},350);
});

As of now when I click on one of the links it goes down to the next line, I'm sure I'm missing some css styling to fix this?

Here is my JsFiddle set up for it: http://jsfiddle.net/804jeg82/412/

Upvotes: 0

Views: 53

Answers (2)

Aaron
Aaron

Reputation: 10430

I would clean up your code a little, put the hidden div inside the clickable div. Use CSS to control the animation and use classes rather than id's.

But that's just personal preference.

$(document).ready(function(){
    $('.clickable').on('click' , function() {
      $(this).find('.hid').toggleClass('showme');
    });
});
.clickable .fa {
  cursor: pointer;
  color: red
}
.clickable .fa,
.hid {
  float: left;
}

.hid {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all ease .35s;
  -webkit-transition: all ease .35s;
  -moz-transition: all ease .35s;
}

.showme {
  width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<div class="clickable"><i class="fa fa-phone"></i>
  <div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
  <div class="hid">Email Here</div>
</div>

Upvotes: 3

redditor
redditor

Reputation: 4276

You need to add float:left to your hidden div

Specifically:

<div id="hidden" style="display:none; white-space:nowrap; float:left">Phone Number</div>

You may also wish to consider separating your HTML and CSS, for example if you used the ID, you could do something like:

HTML

<div id="hidden">Phone Number</div>

CSS

#hidden {
   display:none;
   white-space:nowrap;
   float:left;
}

Upvotes: 2

Related Questions