Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Hide and Show on click with fadeIn / Out

Hi everyone!

Im working on a responsive demo with iframes positioned over devices..

3 devices; Desktop, Tablet, Mobile....

3 Buttons links via "a" tags above these devices courtesy of bootstrap..

My site is built on a bootstrap framework that this will eventually be put onto, I already have the fantastic use of jQuery and all bootstraps jQuery Plugins...

My goal is to show the desktop device on page load...

Then to toggle through the devices one at a time when the relevant link(button) is clicked. Only ever showing one device on the page at one time.

It would be a really big plus to use a nice fade in and out from jQuery to help things look smooth if possible.

my current js is below....

//on click show relevant.


$('#desktop-row').addClass( 'show-me' );

Unfotunatley that is as far as im getting.. I have been on with this all day fooling around with css on the iframe to ensure good positions and my mind has gone blank!

Any help will be much appreciated!!


1 Answer


You'd need to hide the #desktop-row accordingly with CSS. Like so:

#desktop-row {
display: none;

Hi Cory,

Thanks for reply.. Unfortunatley that code wont remove the other devices once the selection is changed ..

But i like the fade and seems easy enough to code :)

Thanks again !

Maybe you could apply the same concept as a fadeOut for the other elements within the #desktop-button function. ;)