Afficher 2 spoiler cote à cote HTML

Fermé

racacax Messages postés 117 Date d'inscription mercredi 11 décembre 2013 Statut Membre Dernière intervention 14 mai 2017 - 27 déc. 2014 à 18:29
vik-prod Messages postés 12 Date d'inscription dimanche 28 décembre 2014 Statut Membre Dernière intervention 28 décembre 2014 - 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>

A voir également:

Afficher 2 spoiler cote à cote HTML
Editeur html - Télécharger - HTML
Comment mettre deux textes côte à côte sur word - Guide
Br html ✓ - Forum Webmastering
Afficher mot de passe wifi android - Guide

4 réponses

Réponse 1 / 4

vik-prod Messages postés 12 Date d'inscription dimanche 28 décembre 2014 Statut Membre Dernière intervention 28 décembre 2014 13
28 déc. 2014 à 15:32

Salut,

Essaye de passer la div en inline-block

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

Réponse 2 / 4

racacax Messages postés 117 Date d'inscription mercredi 11 décembre 2013 Statut Membre Dernière intervention 14 mai 2017 17
Modifié par racacax le 27/12/2014 à 21:55

Personne pour m'aider ? :(

Réponse 3 / 4

racacax Messages postés 117 Date d'inscription mercredi 11 décembre 2013 Statut Membre Dernière intervention 14 mai 2017 17
Modifié par racacax le 28/12/2014 à 17:16

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 Date d'inscription dimanche 28 décembre 2014 Statut Membre Dernière intervention 28 décembre 2014 13
Modifié par vik-prod le 28/12/2014 à 20:09

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 mercredi 11 décembre 2013 Statut Membre Dernière intervention 14 mai 2017 17
28 déc. 2014 à 20:20

Merci ! Ca marche très bien, par contre, il faut bien le javascript pour que ça marche

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

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.

Discussions similaires

mettre deux photos cote à cote

Le son ne sort que d'un côté de mon casque, pourquoi ?

Savoir si je suis bloqué par une personne sur snap chat

Afficher toutes les lignes masquées excel

Snap - croix grise