collapse animation

• 

  krochel · Member · Feb 3, 2017 at 4:12 am

  • Copy link
  • Add topic to favorites

  is it possible to show/hide or collapse certain information maybe based off of div elements. For example on my policy page, it would be nice if the user wasnt having to scroll as much and could click a title to display certain info.

  The blog I need help with is: (visible only to logged in users)

• 

  justjennifer · Member · Feb 3, 2017 at 7:02 am

  • Copy link

  Hi there, do you still need assistance with this? I see you’ve done something similar to what you requested using Jotform on your Policies pages.

• 

  staff-loquaciousloon · Staff · Feb 3, 2017 at 4:49 pm

  • Copy link

  You could try using Summary and Details tags – they aren’t supported by Internet Explorer or Edge yet, but they do pretty much exactly what you’ve described :)

  Another option (not perfect, but could be fun to play around with) would be a modified version of something I’ve used in the past to hide spoilers in things like book reviews:

  .expander:before {
  	content: "(hover to open)";
  	font-size: 20px;
  	background-color: #00006b;
  	position: static;
  	font-weight: bold;
  }
  
  .expander {
  	max-height: 32px;
  	border-radius: 5px;
  	background-color: #00006b;
  	color: #fff;
  	padding: 0 10px;
  	margin-bottom: 18px;
  	overflow: hidden;
  }
  
  .expander,
  .expander p {
  	transition: .75s;
  }
  
  .expander:hover {
  	max-height: 1000px;
  }
  
  .expander p {
  	opacity: 0;
  	font-style: italic;
  }
  
  .expander:hover p {
  	opacity: 1;
  }

  After adding that under My Site > Customize > CSS (if you have a Premium Plan or Business Plan with Custom CSS, you can wrap your text in a div with the right class, like this:

  <div class="expander>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed libero lobortis, lacinia risus eget, auctor eros. Nunc finibus tellus quis ligula sodales viverra at quis urna. Donec id urna vulputate, convallis tellus eu, convallis orci.
  
  Vivamus quis gravida erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sollicitudin libero ac turpis tincidunt, ut elementum nulla euismod. Aenean vel rhoncus tortor.
  </div>

  You should get a blue bar that says “hove to open” and then reveals the text when the cursor touches it.

  Some things to consider if you try that second option:

  – you’ll probably want to play around with the colors/styling
  – you may need to adjust the max-width value depending on how long each of your section is
  – you’ll want to make sure all of your paragraphs are wrapped in paragraph tags. WordPress will usually do this automatically, but it never hurts to double check.
  – each section will have the same title, unless you gave them unique IDs in the HTML and each one it’s own CSS style.

  So neither, sadly, is a perfect solution, but they’re both possibilities!

• 

  krochel · Member · Feb 7, 2017 at 2:15 am

  • Copy link

  I do still need assistance with this issue. I would like there to be images or icons and when each one is clicked the info assigned under that image shows below.

• 

  krochel · Member · Feb 7, 2017 at 2:19 am

  • Copy link

  I tried your second option Chad and its like none of the styling/css is working.

• 

  staff-loquaciousloon · Staff · Feb 7, 2017 at 3:03 pm

  • Copy link

  The second option would likely need some adjusting to fit your needs – and may not be a perfect fit – particularly if you’re picturing clickable icons. That option would have a line of text that expanded when hovered over, but not a click response.