Forums

JoeBrooks

My mind is turning to mush and Google isn't helping me out on this one, perhaps I'm not describing what I want accurately.

Basically I want the contents of a single DIV to change based on which image someone clicks.

  <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>

  <div>Content Changes depending on which Link is clicked</div>

If someone could help point me in the right direct.. i'd appreciate it

JohnMotylJr

@JoeBrooks,

Do you want to change the actual content with javascript on a click or possibly show or hide the content based on clicks?

Here is a CodePen you can check out. Simply doing exactly what you want, change the content based upon which link is clicked.

JoeBrooks

I would like to show / hide content for each link.

For some reason in your example when I move my mouse out of the clickable area it reverts back to the original. I would like the new state to stay visable.

JohnMotylJr

@JoeBrooks ,

Yeah, i added a mouseleave event to clear out the div. Changed it so the content stays as when you leave.

http://codepen.io/johnmotyljr/pen/qhvue

JoeBrooks

Thanks John, I'll give it a shot :)

JohnMotylJr

@JoeBrooks,

No problem! Are you just doing simple stuff like putting image descriptions or more complex content?

JoeBrooks

It's for a biography page on my client's site.

What they want is three photos , and when one photo is clicked the person's bio appears beneath.

What you have works on codepen.. I have ZERO experience with JS or Jquery, how do I go about converting the JS column into a script ?

This is my New Codepen

JohnMotylJr

Step 1 (Adding jQuery library)

<!DOCTYPE hmtl>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Step 2 (Add your jquery code)

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('#aardvark').click(function() {
            $('div').html('The text you are adding');
        });
    });
    <script>
</head>

Nice use-case, you need anymore help man just reply.

JoeBrooks

And it's actually for the mobile version of the site.

Here is the page: http://tomroof.com/tinymonster/about-us/

I have another question. Instead of rewriting the text inside the script, is there a way to call on a Custom Field slug's text instead? IE

<?php echo get_post_meta($post->ID, 'profile2', true); ?>

JohnMotylJr

Would you rather just have javascript collect data, that is already on the page, and enter it rather then typing it all?

JoshBlackwood

Yarp, I would think it'd be better to have the data already on the page, and grab it something like this: http://codepen.io/JoshBlackwood/pen/yoLBJ

Basically, I've got an id set on each image, then a class on each bio div which matches, but with a prefix of .about-. So, Andrew's picture has an id of #andrew and his bio div has a class of .about-andrew.

The jQuery looks for the clicked item's id, assigns it to a variable, then finds the div with the matching class, shows it by removing it's .hide class (I won't stand for inline styling, so no .show() on my watch), and adds the .hide class to any already shown bio div.

Does that seem sensible?

treehouse : what would you like to learn today?

Forums

Change content in DIV based on link click

Step 1 (Adding jQuery library)

Step 2 (Add your jquery code)