Container Style verändern in Datenbank Ausgabe

philip2725 · 7. Januar 2018

Hallo,

hier wird für jede ROW in der Datenbank ein Container ausgegeben. In jedem Container ist ein Button. Sobald man innerhalb eines Containers auf den Button klickt, soll genau dieser Container eine andere Höhe bekommen. Er soll also per Click vergrößert werden. Die anderen Container sollen natürlich bei ihrer Standardgröße verbleiben und erst größer werden, wenn auch bei ihnen auf den Button geklickt wird. Sobald ein zweites mal auf den Button geklickt wird, soll der Container wieder die Standardgröße einnehmen.

Kann mir jemand dabei helfen? Im voraus schonmal DANKE!!!

Hier ein Beispielquelltext:

...........

<?php

while($row = $result->fetch_assoc()) {

?>

<div id="angebotskasten" style='width: 100%; height:400px; background-color: blue;' >

<button type='submit' id='button'>Angebotskasten vergrößern</button>

</div>

<?php

}

?>

.........

Sempervivum · 7. Januar 2018

Ich schlage dies vor:

Code

<style>
        .angebotskasten {
            width: 100%;
            height:400px;
            background-color: blue;
        }
        .angebotskasten.large {
            height: 600px;
        }
            .angebotskasten span.smaller {
                display: none;
            }
            .angebotskasten span.larger {
                display: inline;
            }
            .angebotskasten.large span.smaller {
                display: inline;
            }
            .angebotskasten.large span.larger {
                display: none;
            }
    </style>
    <div class="angebotskasten">
        <button type='button' class='togglebtn'>
            <span class="larger">Angebotskasten vergrößern</span>
            <span class="smaller">Angebotskasten verkleinern</span>
        </button>
    </div>
    <div class="angebotskasten">
        <button type='button' class='togglebtn'>
            <span class="larger">Angebotskasten vergrößern</span>
            <span class="smaller">Angebotskasten verkleinern</span>
        </button>
    </div>
    <script>
        $(".togglebtn").on("click", function () {
            $(this).closest(".angebotskasten").toggleClass("large");
        });
    </script>

Alles anzeigen

Der Code benutzt jQuery, vergiss nicht, es einzubinden.

philip2725 · 7. Januar 2018

Ich danke dir!!!

Container Style verändern in Datenbank Ausgabe

Jetzt mitmachen!

Teilen