6
votes
Divulgation / effondrement des divs

J'ai plusieurs boîtes en expansion / effondrement sur une seule page générée par PHP / MySQL.
Problème est, lorsque je clique sur un lien pour développer une case, il élargit toutes les cases.
J'ai pensé à ajouter l'identifiant post à la fin de la classe (
 ) Mais je ne suis pas sûr que cela fonctionnera depuis que je devrais comprendre un moyen de changer la jQuery. 

 Voici un exemple de travail:  http://jsfiddle.net/draven/kuhkp/35/ 

 Gardez à l'esprit, je ne peux pas coder manuellement dans chaque case car je tire le contenu de la base de données. 

  edit:  peut-être que quelqu'un peut m'aider avec un problème supplémentaire. 

 Je veux concentrer la case  textarea  lorsque j'a développe le  
 . J'ai essayé d'utiliser le même tour que avant (en utilisant  .closest  mais cela n'a pas fonctionné). 

 Voici l'exemple:  http://jsfiddle.net/draven/kuhkp/53/ 

 Cet exemple focalisera toujours le premier   </ code>. </ p>                        </div>
                        <!-- tags -->
                        <div class="d-flex mt-1">
                            <div class="">
                                                                    <a class="badge badge-info" href="/tag/php">php</a>
                                                                    <a class="badge badge-info" href="/tag/jquery">jquery</a>
                                                            </div>
                        </div>
                                                    <hr>
                            <!-- comments -->
                            <div class="pl-5">
                                <small class="text-muted">1 commentaires</small>
                                <div class="comments mt-3">
                                                                            <p>Merci à tous ceux qui ont répondu! Ils ont tous travaillé mais j'ai choisi la réponse qui ne s'appuyait sur aucune table après la DIV.</p>
                                        <hr>
                                                                    </div>
                            </div>
                                            </div>
                    <div class="">
                        <ins class="adsbygoogle"
                             style="display:block"
                             data-ad-client="ca-pub-5975820494937925"
                             data-ad-slot="2186005983"
                             data-ad-format="auto"
                             data-full-width-responsive="true"></ins>
                        <script>
                             (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                                    <!-- Answers -->
                    <p class="mt-4 font-weight-bold">3 Réponses :</p>
                    <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    0<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> si vous appelez <code> $ ("div.postreplycontainer")  code> Vous accéderez à toutes les divs, si la div est toujours après une table, vous pouvez utiliser <pre>$("a.postreply").click(function() {
    $(this).parents('table').next().slideToggle("fast");
});
</pre></code></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    9<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Voici le <strong> <a href="http://jsfiddle.net/vondy2791/kuhkp/40/" rel="noreferrer"> Fiddle </a>  strong> <pre>$("a.postreply").click(function () {
    $(this).closest('.blog-container')
        .find('.postreplycontainer').slideToggle("fast");
});
</pre></strong></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    0<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Je pense que cela devrait être ok pour votre problème. <pre>$("a.postreply").click(function () {
    $(this).closest('.blog-table').next().slideToggle("fast");
});
</pre></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                    
            </div>
            <div class="col-lg-3 col-md-12 col-12 col-sm-12" >
                <div class="related">
		    <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                    <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p>
                                            <a href="/question/pourquoi-est-ce-que-j-39-obtiens-une-erreur-laravel-lors-de-la-cr-eacute-ation-d-39-un-nouveau-projet" class="">
                            Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?                        </a>
                        <hr>
                                            <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class="">
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        </a>
                        <hr>
                                            <a href="/question/laravel-echo-n-39-eacute-coute-pas" class="">
                            Laravel Echo n'écoute pas                        </a>
                        <hr>
                                            <a href="/question/la-validation-de-la-demande-de-formulaire-ne-fonctionne-pas-il-charge-juste-la-page-d-39-accueil-dans-postman" class="">
                            La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman                        </a>
                        <hr>
                                    </div>
                <div class="">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-5975820494937925"
                         data-ad-slot="4267220326"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                         (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>

            <script  type="text/javascript"  src="/js/purecookie.js"></script>        </div>

        <div class="container col-lg-8 col-md-12 ads-footer">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5975820494937925"
                 data-ad-slot="5580301997"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>

    </body>
    <footer>
        <div class="row col-lg-12 col-md-12 text-muted">
            © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>.
        </div>
    </footer>




</html>