When icon clicked, one field form slides out

JavaScript
1

Hey folks!
Basically, i need help with one tiny thing.I have a menu with 4 links in it and a small email icon next to it.Here is the code
<ul id=“navigation”>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a> </li>
<li><a href=“services.html”>Services</a></li>
<li><a href=“contact.html”>Contact</a></li>
</ul>
<img src=“images/subscribe.png” width=“22” height=“22”>

Now, when user clicks on this icon, i would need to make one filed form (for email) to slide out (left from icon) and allow user to enter his email and click send.Also, that form should be able to close when clicked again on the icon.
I know this is a lot of stuff, but is there somebody that could help? :\

I think this is just a few lines of JS/jQuery, but i dont know it , and i really really need help…

2 
<ul id="navigation" style="display:none;"> // hide this from begin
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a> </li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img id="icon" src="images/subscribe.png" width="22" height="22">

I use jquery.

<script>
$('#icon').click(function() {
  $('#navigation').toggle('fast', function() {
    // Animation complete.
  });
});
</script>
3

Thank you for your time and help :slight_smile:
Since i dont know any jquery, this doesnt help much xD Is there any chance that you could help me again? :slight_smile:

This is the form i want to be slided out to the left:
<form>
<input name=“email” type=“email” placeholder=“Enter your e-mail…”>
<input name=“submit” type=“button” value=“Send”>
</form>

4

Add this line before </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Add code where you want to show image and form subcribe.

<img id="image-subscribe" src="images/subscribe.png" width="22" height="22">
<form id="subscribe" style="display:none;">
<input name="email" type="email" placeholder="Enter your e-mail...">
<input name="submit" type="button" value="Send">
</form>
<script>
$('#image-subscribe').click(function() {
  $('#subscribe').toggle('fast', function() {
    // Animation complete.
  });
});
</script>
5

If there was option on this forum “buy a beer to a member” you would deffinetely got it :smiley:
Thanks a lot!!!
If i can only bore you with one other thing…This works great, but it slides down.How it can be changed to slide to the left of the icon?

6

Try this. Hope it work. :wink:

<form>
<input id="subscribe-email" name="email" type="email" placeholder="Enter your e-mail..." style="display:none;">
<input id="subscribe-send" name="submit" type="button" value="Send" style="display:none;">
<img id="image-subscribe" src="images/subscribe.png" width="22" height="22">
</form>
<script>
$('#image-subscribe').click(function() {
  $('#subscribe-email').toggle('fast', function() {
  $('#subscribe-send').toggle('fast', function() {
  });
  });
});
</script>
7

It works perfectly, but when i click on the image, form window that slides out moves to image to the right side…Any option to “lock” the image at place, so that only the form slides out?

8

I will try but I must know where you place the code. Please send to me your website.