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 Date d'inscription   Statut Membre Dernière intervention   -
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>  
A voir également:

4 réponses

vik-prod Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   13
 
Salut,

Essaye de passer la div en inline-block

<div class="quotetitle" style="display: inline-block;"></div>
1
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
0
vik-prod Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   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>
0
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
vik-prod Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   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