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 troy beckett
troy beckett
12,035 Points

changing content of a div??

I didn't know really how to title my problem so stay with me if its slightly different to how my title suggests.

What I currently have is a div with pictures of artists displayed in it. I also have a link at the top of the div that says View as List that currently does nothing.

However what I want to do is when I click the View As List link I want the content in the div to change to a list of the artist names not so you can no longer see the pictures until you click view a link that says View As Thumbnails. What i really don't want to do is click the links and have to direct them to a whole new page to reveal new content.

I'm guessing this will involve javascript/jquery, I'm not the best with it but if someone could direct me in the right direction, possibly give me an insight into the sort of things I need to do or look at to get this sort of thing working. It would be of great help because I'll go away and start learning it

Jose Soto
Jose Soto
23,407 Points

Please post some code that you have already tried.

1 Answer

jason phillips
jason phillips
18,131 Points
jason phillips
jason phillips
18,131 Points

You could have the html for both "views" written out on the page and hide the second one. When the user clicks on "View As Thumbnails" or "View As List" you would hide the other. The simplest way to accomplish this would probably be to add and remove a css "hide" class:

.hide {
  display:none;
}

On the initial page load, the second section can have the class hide. When the user clicks on the button, add hide to the first and remove from the second.