Bootstrap collapse on mobile but show on desktop

Hi,

I would like to have some content visible on desktop, but the same content visible only on mobile via a collapse button. I don’t want to have duplicate content, so would like to only have one block of content.

This is what I have so far:

<button type="button" class="btn btn-info visible-xs" data-toggle="collapse" data-target="#narrow-results">Narrow your results</button>
  <div id="narrow-results" class="collapse">
my content
</div>

At the moment, I need to add 2 lots of content, but I only want to show one.

Any ideas how to do this?

Thanks!

Hi,

I’m not sure if this is what you meant but try this.

<button type="button" class="btn btn-info visible-xs" data-toggle="collapse" data-target="#narrow-results">Narrow your results</button>
<div id="narrow-results" class="narrow-results collapse">my content</div>

Then add this CSS:

@media screen and (min-width:767px){
	.narrow-results{display:block}
}
@media screen and (max-width:766px){
	.narrow-results{display:none}
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.