Collapse button + style

Op desktop uitgeklapt en button niet zichtbaar en op mobiel ingeklapt met button tbv filter. Op basis van bootstrap 3 i.c.m. fontawesome

Style

#filter.collapse {
	display: block;
	@media @md {
		display: none;
	}
  }
 .fltrbtn {
	 display: none;
	 @media @md {
		display: block;
		padding: 10px 10px;
		background: #fff;
		text-align: center;
		font-size: 20px;
		
		&:after {
			padding-left: 10px;
			content: "\f078";
			font-family: FontAwesome;
		}
		
		&[aria-expanded="true"] {
			&:after {
				content: "\f077";
			font-family: FontAwesome;
			}
		}
		&:hover {
			text-decoration: none;
			color: @color_alt2;
		}
	}
 }

PHP

<a class="fltrbtn" data-toggle="collapse" href="#filter" role="button" aria-expanded="false" aria-controls="filter">Wat voor training zoekt u?</a>
						<div class="collapse" id="filter">
						<span class="ttle">Filter uw zoekopdracht</span>
						<?php echo facetwp_display( 'facet', 'extra' ); ?>
						<?php echo facetwp_display( 'facet', 'leervormen' ); ?>
						<?php //echo facetwp_display( 'facet', 'plaats' ); ?>
						<br/>
						<span class="ttle">Trainingen</span>
						<?php echo facetwp_display( 'facet', 'training' ); ?>
						</div>

 

#bootstrap #button #collapse #css #filter #fontawesome #php