effet accordeon suivant la resolution

Bonjour , je souhaite afficher des images grâce à un effet accordéon sur mobile pour ne pas utiliser trop de place. Mais je ne souhaite pas que mon bouton s'affiche sur PC/tablette (donc ça affiche les images directement) Est-ce possible ? Car si j'utilise un display: none cela va cacher toute ma div contenant mes images ? Merci

(donc ça affiche les images directement) Est-ce possible ?

oui, il suffit de créer une mediaquery qui donne un display:none lorsque l'écran est adéquat. Tu peux tout à fait utiliser display:none sur le bouton en lui même et uniquement lui.

Peux-tu nous montrer ton code qu'on puisse t'aider d'une manière plus précise?

J'ai ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="panel panel-default col-lg-6">
    <div class="panel-heading"> 
     <a href="#seelook" data-toggle="collapse"> Voir plus <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
    </div>
        <div id="seelook" class="panel-collapse collapse">
            <div class="panel-body">  
                <div class="col-md-8">
                    <div class="row">
                        <tile class="col-md-6" ng-repeat="tile in tiles | limitTo : 4" tile="tile" look="look"></tile>
                    </div>
                </div>
            </div>
        </div>
</div>

j'ai essayé un

1
2
3

.panel-heading {
display : none;
}

Mais ça n'affiche plus mon bloc du tout. En fait je veux juste désactiver cet effet sur grand ecran

quelqu'un peut m'aider?

Et avec les media queries comme l'a dit artragis, ça donne quoi ?

Salut !

Regardes sur le Net comment fonctionnent les media queries. C'est du CSS3 (sans javascript), ça marche sur tous les navigateurs récents, y compris sur les systèmes mobiles. Lire : alsacreations.com/...css3-media-queries.html et/ou openclassrooms.com/...mise-en-page-adaptative-avec-les-media-queries par exemple.

Dans ton cas, c'est super-simple, t'as juste à ajouter ceci à la fin de ton css :

1
2
3
4
5

@media (max-width: 481px) {
    .panel-heading {
    display : block;
    }
}