Kommentar-Eingabe verstecken (jQuery u.a)

Bei den Beiträgen soll das Kommentar-Eingabefeld erst durch einen Klick auf dem Button „Infos hinzufügen“ oder Titel geöffnet werden.

Lösung mit Button:

Um den Kommentarbereich zu „verstecken“ habe ich bisher ein kleines Script in die comments.php eingebunden:

<script type="text/javascript" language="javascript">function showForm(obj){
obj.style.display = 'none';
var ele = document.getElementById('rumwallform');
if (ele){
ele.style.display = 'block';}
}
</script>

Der Kommentarbereich wird dann mittels eines Buttons geöffnet:

<div id="rumwallbtn">
<input type="image" src='http://foto.funkygog.de/images/Button/Button-Infos.png' alt="Info hinzufügen" onclick="showForm(this);" value="<?php _e('Comment'); ?>" class="styled"/>
</div>
<div id="rumwallform" style="display: none;">

Lösung mit Accordion-Effekt:

Habe jetzt den Kommentar-Bereich mittels eines Accordion-Scripts „versteckt“
Infos und Anleitung siehe:

Simple-Slide Panel:

Eine schöne Umsetzung gibt es auch hier zu sehen:

Hier wird ein Simple Slide Panel (Demo) vorgestellt mit Hinweisen zum Einbau.
Hört sich einfach an, aber ich habe es leider nicht hinbekommen.
Die einzelnen Schritte [spoiler]

  1. Zunächst muss man jQuery in das Theme einbinden.
    Bei WordPress ist dieses Standardmäßig bereits vorhanden.
    Um es zum „leben zu erwecken“ muss es im Header aufgerufen werden.
    Ich habe das gemäß dieser Anleitung gemacht.

    <?php wp_enqueue_script('jquery');?>

  2. Danach muss die einzelne Funktion aufgerufen werden:

    <script type="text/javascript">
    $(document).ready(function(){
    $(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active");
    });
    });
    </script>

  3. css-Angaben in der style.css festlegen
    Dazu habe ich mir den Quelltext der Demo angeschaut und zunächst etwas vereinfacht:

    /* jQuery-Slide */
    a:focus {
    outline: none;
    }
    #panel {
    background: #754c24;
    height: 200px;
    display: none;
    }
    .slide {
    margin: 0;
    padding: 0;
    }
    .btn-slide {
    background:#fff;
    text-align: center;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    text-decoration: none;
    }
    .active {
    background-position: right 12px;
    }

  4. Die eigentliche Eingabe sieht dann so aus (Quelltext):

    <div id="panel">
    <!-- you can put content here -->
    </div>
    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

wie gesagt, leider habe ich es nicht hinbekommen. Vermutlich liegt der Fehler beim Eingabebereich.[/spoiler]

weitere Möglichkeiten:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.