I've been hung up on this issue for quite a bit and after searching many different questions unsuccessfully hopefully someone can aid me a bit.

I'm using jquery slidetoggle to open a small window when a user clicks on a tab that should always be pinned to the bottom of my site. My issue is that when I have multiple tabs together at the bottom and one is clicked, then both rise to the top of the div. I want them to move independently so when one is clicked the other stays pinned to the bottom of my webpage. I've tried several configurations of CSS styling and positioning and haven't been able to crack this.

I've simplified my code and added a fiddle below so if anyone has any advice I'd sure appreciate it.

Javascript

$(function() { $("a#toggle2").click(function() { $("#contact2").slideToggle(); return false; }); }); $(function() { $("a#toggle3").click(function() { $("#contact3").slideToggle(); return false; }); });

CSS

.icx_link_parent { position: fixed; bottom: 0; right: 100px; color: #888; } .icx_link2 { border-radius: 5px 5px 0 0; background: #D9072D; padding: 3px; float: right; color: #888; } .icx_link3 { border-radius: 5px 5px 0 0; background: #D9072D; padding: 3px; float: right; color: #888; } #contact2 { display: none; background: #FFFFFF; color: #FFF; } #contact3 { display: none; background: #FFFFFF; color: #FFF; } #chatbox2 { width: 100% margin-left: auto; margin-right: auto; margin-top; 0; margin-bottom: 0; background-color: #D9072D; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-weight: bold; display: inline-block; } #chatbox3 { width: 100% margin-left: auto; margin-right: auto; margin-top; 0; margin-bottom: 0; background-color: #D9072D; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-weight: bold; display: inline-block; }

I've added a fiddle of this for easy diagnosis as well

https://jsfiddle.net/frubo5pm/2/

Thank you