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.
If someone could help point me in the right direct.. i’d appreciate it
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)
$('div').html('The text you are adding');
Nice use-case, you need anymore help man just reply.
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); ?>
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?
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)
nvm, I found this article and seem to have gotten it working:
@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!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".