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!
Hey man. I am trying to use this code to load videos from Vimeo.
I tried using the iframe code on your codepen page instead of the text and it worked like a charm.
However when I try and apply it to my own page using the same code – it doesn’t do anything. I have checked and re-checked for errors but everything seems in place.
Might you have any idea why it just might not be functioning?
Thanks for your help!
You must be logged in to reply to this topic.