Grow your CSS skills. Land your dream job.

Change content in DIV based on link click

  • # March 5, 2013 at 10:58 pm

    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.

    Link 1 | Link 2 | Link 3

    Content Changes depending on which Link is clicked

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

    # March 5, 2013 at 11:33 pm

    @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.

    # March 6, 2013 at 12:12 am

    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.

    # March 6, 2013 at 12:29 am

    @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

    # March 6, 2013 at 12:36 am

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

    # March 6, 2013 at 12:38 am

    @JoeBrooks,

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

    # March 6, 2013 at 12:59 am

    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](http://codepen.io/anon/pen/oDCmB)

    # March 6, 2013 at 1:11 am
    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.

    # March 6, 2013 at 1:29 am

    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); ?>

    # March 6, 2013 at 1:57 am

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

    # March 6, 2013 at 1:59 pm

    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?

    # May 27, 2013 at 1:58 pm

    I’m trying to get this to work in wordpress. Not sure I put the code in the header properly. Any suggestions? (Ignore the fact that the css messed up the rest of the page)

    http://hotzon.honeycombsites.ca/testpage2

    [edit]

    nvm, I found this article and seem to have gotten it working:

    http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    SWS
    # July 30, 2013 at 12:55 am

    if I want to target to another html file?

    # January 21, 2014 at 3:34 am

    @JoshBlackwood! I’ve been after a piece of code like this forever, thanks!

    Just wondering now if you could add a sliding animation rather than it just abruptly disappearing?

    I’ve tried incorporating .slideUp(), slideDown() and .slideToggle(). No luck though, ’cause I’m not the best with JS/jQuery.

    Any help would be smashing!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".