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

Dennis Castillo
Dennis Castillo
16,018 Points
Posted by Dennis Castillo
Dennis Castillo
16,018 Points

jQuery, Need some help for my personal project... Hide & Show things

I follow the code from a video introduction of jQuery... and do some experiment to my website. I create 2 button or hyperlink, for each button once it click it will show the image.

Problem: 2 button (button A and button B); once the button A click the image will show, once the button B click, the image from button A will be hide and image from button B will show up same thing what happen once the button A is click.

(Need more information to be correct)

$("#WSTVAA-weather-bangsamoro").hide().before("<a href='#' class='bangsamoro' onclick='clicksound.playclip()'>Image A</a>")
$("#WSTVAA-weather-right").hide().before("<a href='#' class='bangsamoro' onclick='clicksound.playclip()'>Image B</a>");
$(".bangsamoro").click(function(){
    var $link = $(this);
    $link.next().show("slow");
    $link.remove();
    return false;
});

any suggestion???

Thanks and God Bless...

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

So, let me see if I've got this. You have two buttons or links on your page. Each button has an image connected with it and, when you click one of the buttons, the image tied to that particular button is revealed.

So, for example, when I click Button #1, Image #1 is revealed to me, and when I click Button #2, then Image #1 is hidden and Image #2 is revealed.

Is that what you're trying to figure out?

2 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

It's a little too complicated to try and demonstrate here, so have a CodePen. I have a couple notes, but they're all in comments in the pen.

Dennis Castillo
Dennis Castillo
16,018 Points
Dennis Castillo
Dennis Castillo
16,018 Points

Thank you very much for giving me an information on how to do this things. This is what exactly i'm looking for, I tried it too yesterday all day long and what I'm come up too is duplicating the code and remove the "$link.remove" and replace with $("#WSTVAA-weather-right").show("slow") , the one that I post on the top. it is very complicated c'oz the result come up to that the format of every each content is keep messing-up, so i have to re arrange the format from CSS.

Yours is more professional, so I thank you... It will learn me a lot :)

Thanks and God Bless

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

No problem. It was a lot of fun. :D Glad I could help!