Afficher 2 spoiler cote à cote HTML

racacax Messages postés 117 Date d'inscription Statut Membre Dernière intervention -
vik-prod Messages postés 12 Statut Membre - 28 déc. 2014 à 20:23

Bonjour, j'aimerai savoir comment afficher 2 spoiler cote à cote. car, quand j'en mets 2, ils se mettent à la ligne à chaque fois. Voici le code :

<div style="margin: 5px 20px 20px;"><div class="quotetitle"><b></b> <input value="Afficher/Cacher le forum" style="margin: 0px; padding: 0px; width: 250px; font-size: 20px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Cacher le chat'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher/Cacher le forum'; }" type="button"></div><div class="quotecontent"><div style="display: none;"> <iframe style="border:none;" src="http://forum-racacax.t15.org" height="800" width="100%">Your browser doesn't seem to support iframes.</iframe>  </div></div></div>

Afficher la suite

4 réponses

Réponse 1 / 4
vik-prod Messages postés 12 Statut Membre 13
Salut,

Essaye de passer la div en inline-block
```
<div class="quotetitle" style="display: inline-block;"></div>
```
1
Réponse 2 / 4
racacax Messages postés 117 Date d'inscription Statut Membre Dernière intervention 17

Personne pour m'aider ? :(
0

racacax Messages postés 117 Date d'inscription Statut Membre Dernière intervention 17

Je remplace bien ça :

<div class="quotetitle">

par ça :

<div class="quotetitle" style="display: inline-block;"></div>

? Car j'ai fais ça et toujours à la ligne

Merci pour ton aide

vik-prod Messages postés 12 Statut Membre 13

Si tu veux que les boutons soit en ligne il faut faire ça (ne prete pas attention au code Js):
Les 2 input dans la même div ou mettre les div en inline-block.

<div style="margin: 5px 20px 20px;">
    <div class="quotetitle">
        <input value="Afficher/Cacher le forum" style="margin: 0px; padding: 0px; width: 250px; font-size: 20px;" type="button" onclick="afficher('sp1')"/>
        <input value="Afficher/Cacher le forum" style="margin: 0px; padding: 0px; width: 250px; font-size: 20px;" type="button" onclick="afficher('sp2')"/>
    </div>

    <div class="quotecontent" >
        <div style="display: none;" id="sp1"> 
            <iframe style="border:none;" src="http://forum-racacax.t15.org" height="800" width="100%">Your browser doesn't seem to support iframes.</iframe>  
            
        </div>
    </div>
    <div class="quotecontent" >
        <div style="display: none;" id="sp2"> 
             <iframe style="border:none;" src="http://forum-racacax.t15.org" height="800" width="100%">Your browser doesn't seem to support iframes.</iframe> 
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
    function afficher(id){
        var $item = $('#'+id);
        if($item.is(':visible'))
            $item.hide();
        else
            $item.show();
    }
</script>

Réponse 4 / 4
racacax Messages postés 117 Date d'inscription Statut Membre Dernière intervention 17

Merci ! Ca marche très bien, par contre, il faut bien le javascript pour que ça marche
0
1. vik-prod Messages postés 12 Statut Membre 13
  
  Ton code avait déjà du Js, je l'ai juste modifié un peux.
  Tu peux très bien garder ton ancien code et mettre juste les 2 input dans la div, ça fonctionnera pareil.
  
  0

Afficher 2 spoiler cote à cote HTML

4 réponses

Discussions similaires

Newsletters