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 Eric Smith
Eric Smith
3,537 Points

href to javascript function or use dynamic image in javascript function

I want to hide certain details and have them show when certain text or an image is clicked. I have a basic javascript function that does this, but it only displays one image. I would like that image to match the php variable when I use the php foreach command to list multiple items.

I'm wondering if I can change the script to output each image to each listed item in the php foreach command, or if I can have the images already being displayed in the foreach command also act as an href to that javascript command.

Below is my javascript:

<script type="text/javascript">
    $(".book-description").hide().before("<a href='#' class='description-reveal'>
<img src='images/bookmark.png'></a>");

    $(".description-reveal").click(function(){
        var $link = $(this);
        $link.next().toggle("fast");
        return false;
    });
</script>

You'll see that the image bookmark.png is currently being used to display below all (currently) six items in my foreach loop. How do I make that image dynamic or href the images in the foreach loop to that command?