.tab {
  padding: 1em;
  margin: 0;
  position: relative;
  cursor: pointer;
  outline: 0;
}
.tab:after {
    	content: '+';
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			font-size: 1.5em;
			padding: 0.5em;
}
.tab.active {
  background: rgba(0,0,0,0.3);
}
.tab.active:after {
   content: '-'; 
}

.panel { 
  overflow: hidden;
}
.js .panel {
  max-height: 0;
  -webkit-transition: max-height 0.3s ease-out;
  -moz-transition: max-height 0.3s ease-out;
  -ms-transition: max-height 0.3s ease-out;
  -o-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out;
}
.js .panel.active {
  max-height: 30em;
}
.panel p {
  padding: 1em;
}
.panel p:last-child {
   margin: 0; 
}

/* Where it makes sense to display the full content */
@media all and (min-width:50em) {
  .tab {
    cursor: default;
  } 
  .tab.active {
     background: none; 
  }
  .tab:after, .tab.active:after {
     content: ""; 
  }
  
  .js .panel, .js .panel.active {
     max-height: none; 
  }
}