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

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

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-button').click(function(){
    $('#desktop-row').toggleClass("show-me");
});
$('#tablet-button').click(function(){
    $('#tablet-row').toggleClass("show-me");
});
$('#mobile-button').click(function(){
    $('#mobile-row').toggleClass("show-me");
});

$('#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!!

Craig

1 Answer

Cory Allen
Cory Allen
730 Points
Cory Allen
Cory Allen
730 Points 
$('#desktop-button').click(function(){
    $('#desktop-row').fadeIn("slow");
});

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

#desktop-row {
display: none;
}
Craig Watson
Craig Watson
27,930 Points

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 !

Cory Allen
Cory Allen
730 Points

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