-
AuthorPosts
-
June 8, 2021 at 8:56 pm #1304745
Hey everyone,
I’m trying to make a team page like this one here – https://norwoodco.com/about-us/leadership/
How can I set it up so that when you click on an image of someone it drops down their bio?
Thanks
June 9, 2021 at 3:53 pm #1304927Any update?
June 10, 2021 at 7:45 am #1305010Hi,
I couldn’t see anything dropping down on the page you linked to? If you want to list team members, then you can check this element out: https://kriesi.at/themes/enfold-2017/elements/team-member/, https://kriesi.at/documentation/enfold/team-member/.
We can help you out with small adjustments to the element, if that should be needed.
Best regards,
RikardJune 10, 2021 at 12:31 pm #1305068HI!
So if you click on a team member on that page I linked it drops down their bio! Let me know if it works for you or not!
June 12, 2021 at 10:43 pm #1305422Hi,
Thank you for your patience and the link to the example, unfortunately, we don’t have an element that works like this but I put together a rough example that may work for you using our elements and a little jQuery:
the backend:
So each column has a custom class such as: .show-one, .show-two, .show-three, .show-four then place your content.
Each text element below that will be your “Drop Down” will have the corresponding custom class: .one,.two,.three,.four please note that in the custom class fields you do not actually use the class dots:
Anyways, for this example I used a code block element to add the jQuery:<script> (function($){ $(document).ready(function(){ $('.one,.two,.three,.four').hide(); $('.show-one').click(function(e){ e.preventDefault(); $('.two,.three,.four').hide(); $('.one').toggle(); }); $('.show-two').click(function(e){ e.preventDefault(); $('.one,.three,.four').hide(); $('.two').toggle(); }); $('.show-three').click(function(e){ e.preventDefault(); $('.one,.two,.four').hide(); $('.three').toggle(); }); $('.show-four').click(function(e){ e.preventDefault(); $('.one,.two,.three').hide(); $('.four').toggle(); }); }); })(jQuery); </script>
Please note the <script> tags in the code.
That is the basic idea, naturally you can style it a lot more with css to add hover effects and padding, border color, etc.Best regards,
MikeJune 14, 2021 at 6:30 pm #1305658Thank you!
June 15, 2021 at 1:02 am #1305682Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.