Show-Hide

Hier gibt es allerlei Snippets zu finden

Show-Hide

Beitragvon Nashra » Fr 3. Mai 2013, 11:13

Name: Show-Hide
Beschreibung: zum ein/ausblenden von div. Bereichen

In unserem Beispiel möchten wir den Bereich zwischen der Forenliste und dem Footer ausblenden
d.h. die Anmeldung, Wer ist Online und die Statistik sollen erst beim anklicken des Links "Show List"
angezeigt werden.

Demobild(er):
Bildname: Hide_List.jpg
Bildname: Show_List.jpg

Demo: http://test3.allround-phpbb.de

Öffne: styles/prosilver/template/index_body.html
Finde Dies kann auch nur ein Teil einer ganzen Zeile sein
Code: Alles auswählen
<!-- INCLUDE forumlist_body.html --> 
Danach einfügen In einer neuen leeren Zeile danach einfügen
Code: Alles auswählen
<script type="text/javascript">
// <![CDATA[
var hide = 'Hide List';
var show = 'Show List';
$(function(){
    $('#ShowList').show();
    $('#info_list').hide();
});
    $(function(){
        $('#ShowList').show();
        $('#info_list').hide();
    });
    function showList()
    {
        $('#info_list').fadeIn(500, function(){
            $('#ShowList').delay(200).replaceWith('<a href="#" id="HideList" onclick="hideList(); return false;">'+hide+'</a>');
        });
    }
    function hideList()
    {
        $('#info_list').fadeOut(500, function(){
            $('#HideList').delay(200).replaceWith('<a href="#" id="ShowList" onclick="showList(); return false;">'+show+'</a>');
        });
    }
// ]]>
</script>
<h3><a onclick="showList(); return false;" id="ShowList" href="#">Show List</a></h3>

<div id="info_list" style="display:none;">
Finde Dies kann auch nur ein Teil einer ganzen Zeile sein
Code: Alles auswählen
<!-- INCLUDE overall_footer.html --> 
Davor einfügen In einer neuen leeren Zeile davor einfügen
Code: Alles auswählen
</div
Nashra
Kein Support per PN/E-Mail usw.
Allround-phpBB.de
Benutzeravatar
Nashra
Administrator
Beiträge: 1319
Themen: 163
Registriert: 11.10.2012
Wohnort: Wankum
Danke gegeben: 13
Danke bekommen:
115 mal in 93 Beiträgen
Vorname: Ralf
phpBB.de: FRvN
phpBB.com: Nashra

folgende User möchten sich bei Nashra bedanken: [Bedankungen anzeigen]

Zurück zu Snippets



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


x-Achse: 0
y-Achse: 0
cron