mehrere Toggle Button in einem skript

[twinko]

Hallo,

bis jetzt habe ich imm folgenden toggle buton verwendet:

<button onclick="toggleContent()">ein/ausklappen</button>
<div ID="content" style="display:none;">

TEXT TEXT TEXT

</div>


<script type="text/javascript">
function toggleContent() {
  // Get the DOM reference
  var contentId = document.getElementById("content");
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block"; 
}
</script>

funktioniert soweit blendend, ich klicke einemal der text erscheint und ich klicke ein zweites mal und er verschwindet.

nun möchte ich aber zwei dieser button mit unterschiedlichem Text auf meine homepage machen. wie mache ich dem skript klar welcher button welchen text toggeln soll?

[Roin]

Entweder du lässt durchzählen, der wievielte Button betätigt wurde (zum Beispiel der 2.) und blendest dann den 2. ein..

Oder du liest die Button vorher ein mit den dazugehörigen Texten (ids der entsprechenden Elemente) und speicherst diese als Referenzen in einem Array und verwendest dieses für deine Funktion

Das wären jetzt zwei mögliche Lösungsansätze, die mir in den Kopf schießen. Ob die auch so funktionieren kann ich allerdings leider nicht sagen. JavaScript verwende ich relativ selten.

Ansonsten könntest du ja mal folgendes anschauen:

/************************************************************************************************************
Show hide content with slide effect
Copyright (C) August 2010  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

************************************************************************************************************/

var dhtmlgoodies_slideSpeed = 10;    // Higher value = faster
var dhtmlgoodies_timer = 15;    // Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.

function showHideContent(e,inputId)
{
    if(dhtmlgoodies_slideInProgress)return;
    dhtmlgoodies_slideInProgress = true;
    if(!inputId)inputId = this.id;
    inputId = inputId + '';
    var numericId = inputId.replace(/[^0-9]/g,'');
    var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

    objectIdToSlideDown = false;

    if(!answerDiv.style.display || answerDiv.style.display=='none'){
        if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId && !dhtmlgoodies_expandMultiple){
            objectIdToSlideDown = numericId;
            slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
        }else{

            answerDiv.style.display='block';
            answerDiv.style.visibility = 'visible';

            slideContent(numericId,dhtmlgoodies_slideSpeed);
        }
    }else{
        slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
        dhtmlgoodies_activeId = false;
    }
}

function slideContent(inputId,direction)
{

    var obj =document.getElementById('dhtmlgoodies_a' + inputId);
    var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
    height = obj.clientHeight;
    if(height==0)height = obj.offsetHeight;
    height = height + direction;
    rerunFunction = true;
    if(height>contentObj.offsetHeight){
        height = contentObj.offsetHeight;
        rerunFunction = false;
    }
    if(height<=1){
        height = 1;
        rerunFunction = false;
    }

    obj.style.height = height + 'px';
    var topPos = height - contentObj.offsetHeight;
    if(topPos>0)topPos=0;
    contentObj.style.top = topPos + 'px';
    if(rerunFunction){
        setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
    }else{
        if(height<=1){
            obj.style.display='none';
            if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
                document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
                document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
                slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
            }else{
                dhtmlgoodies_slideInProgress = false;
            }
        }else{
            dhtmlgoodies_activeId = inputId;
            dhtmlgoodies_slideInProgress = false;
        }
    }
}



function initShowHideDivs()
{
    var divs = document.getElementsByTagName('DIV');
    var divCounter = 1;
    for(var no=0;no<divs.length;no++){
        if(divs[no].className=='dhtmlgoodies_question'){
            divs[no].onclick = showHideContent;
            divs[no].id = 'dhtmlgoodies_q'+divCounter;
            var answer = divs[no].nextSibling;
            while(answer && answer.tagName!='DIV'){
                answer = answer.nextSibling;
            }
            answer.id = 'dhtmlgoodies_a'+divCounter;
            contentDiv = answer.getElementsByTagName('DIV')[0];
            contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
            contentDiv.className='dhtmlgoodies_answer_content';
            contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
            answer.style.display='none';
            answer.style.height='1px';
            divCounter++;
        }
    }
}

function expand_multi(m)
{
    if(false == m) {
        dhtmlgoodies_expandMultiple = false;
    } else {
        dhtmlgoodies_expandMultiple = true;
    }
}
window.onload = initShowHideDivs; 

.dhtmlgoodies_question {    /* Styling question */

    /* Start layout CSS */
    
        color:#FFFFFF;
        /*font-size:0.9em;*/
        /*background-color:#317082;*//*Türkis*/
        /*background-color:#666666;*//*Grau*/
        background-color: #8A0000; /*etwas dunkler als Darkred*/
        /*width:430px;*/
        margin-bottom:2px;
        margin-top:2px;
        padding-left:5px;
        
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        behavior:url(cssborder-radius.htc); /* Für den IE */
        /*background-image:url('images/bg_answer.gif');
        background-repeat:no-repeat;
        background-position:top right;*/
        /*height:20px;*/

    /* End layout CSS */
    
    /* The following Code have to keep like this. */
    overflow:hidden;
    cursor:pointer;
}
.dhtmlgoodies_answer {    /* Parent box of slide down content */

    /* Start layout CSS */
    
        /*border:1px solid #317082;
        background-color:#E2EBED;
        width:400px;*/
        /*border:1px solid #CCCCCC;*//*Grau*/
        border: 1px solid #8B0000;
        background-color:transparent;
        
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        behavior:url(cssborder-radius.htc); /* Für den IE */

    /* End layout CSS */
    
    /* The following Code have to keep like this. */
    visibility:hidden;
    height:0px;
    overflow:hidden;
    position:relative;

}
.dhtmlgoodies_answer_content {    /* Content that is slided down */

    /* Start layout CSS */
    
        padding-top:1px;
        padding-bottom:1px;
        /*font-size:0.9em;*/
    
    /* End layout CSS */
    /* The following Code have to keep like this. */
    position:relative;
}

.dhtmlgoodies_answer_content p {
    padding-left:5px;
    padding-right:5px;    
} 

<div class="dhtmlgoodies_question">
Inhalt
</div>
<div class="dhtmlgoodies_answer">
	<div>
	Hier steht Inhalt
	</div>
</div>

Da kannst du dir vielleicht was abgucken ;-)

EDIT:
Kurzerläuterung wie das funktioniert:
Du schreibst deine Button in dein Dokument und versiehst sie mit einem Attribute+Wert, den sonst kein anderes Element bekommt.
Danach lässt du die Elemente auslesen und gibst ihnen durch JS eine fortlaufende ID.
Anschließend, lässt du bei einem Klick auf einen deiner Button die ID des angeklickten Buttons mitgeben (oder direkt die Referenz zum Button, wie es da (e) gemacht wird.)
Dort liest du die ID wieder aus und Arbeitest mit ihr weiter.
Du könntest auch beispielsweise jeden p-Tag nach einem Button ebenfalls auslesen lassen und dann gleichartige Ids vergeben lassen.

Allerdings wäre für diese Umsetzung ein umschließendes Element sinnvoll (denke ich), um das Auslesen und Verarbeiten zu vereinfachen.
ENDE EDIT

Ich vermute, dass die Internetadresse dadrin nicht mehr aktuell ist, da ich sie eben nicht erreicht habe (sonst hätte ich nur verlinkt), aber es stand zur freien Verfügung also posts ich hier mal.
Ansonsten, falls jemand was anderes rausfindet, bitte ich einen Mod/Admin zu informieren, damit der das hier wieder löscht.

[twinko]

pau...............

danke für die schnelle antowrt und nun zu mir --> OMG
mit solch einem aufwand habe ich nicht gerechnet.
ich dachte vielleicht es gibt einen befehl der das skript an einer gewissen stelle automatisch schließt, sodass der folgende button wieder in sich geschlossen starten kann.
ich denke jedoch das für deinen vorschlag meine kenntnisse nicht ausreichend sind. gibt es keinen einfacheren weg? werde lange lesen müssen um mich durch deine idee durchzuwurschteln. trotzdem bin ich dir schonmal sehr dankbar

habe aktuelle einen netten beitrag gefunden indem 3 felder ktiviert werden. jedoch ist mein problem das man nicht alle schlißen kann sondern immer eins davon aufgeklappt ist. vielleicht hat ja dazu jemand eine idee, wenn meine erste frage so aufwendig ist.
http://www.randomsnippets.com/2011/0...v-with-jquery/ "Here is a new demo in response to a request where only one div is displayed at any one time."

[Roin]

Wenn du kein "Allarounder"-Script haben möchtest und dir "kleine" Anpassungen lieb sind, dann kannst du natürlich auch etwas ganz einfaches nehmen á la

function toggleContent(id) {
  // Get the DOM reference
  var contentId = document.getElementById(id);
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block"; 
} 

<button onclick="toggleContent('content')">ein/ausklappen</button>
<div ID="content" style="display:none;">

TEXT TEXT TEXT

</div>
<button onclick="toggleContent('content2')">ein/ausklappen</button>
<div ID="content2" style="display:none;">

TEXT TEXT TEXT

</div>

Sowas habe ich auf einer meiner ersten Seiten verwendet...
Allerdings, wenn du dann alle anderen dabei wieder schließen möchtest, solltest du trotzdem eine "INI-Function" erstellen, damit du nicht auch noch alle anderen "spoiler" einzeln schließen musst, falls die das noch nicht sind.

die könnte dann wie folgt aussehen

function ini_toggle_content() {
    var elements = document.getElementsByTagName('button');
    var i=0;
    var oclick;
    var id;
    ids = new Array();
    while(elements[i]) {
        oclick = elements[i].onclick;
        id = oclick.substr(15, oclick.length-17);//15, weil ab dem 15. starten (toggleContent(' weglassen)
        ids.push(id);
        i++;
    }
}
function toggleContent(id) {
  // Get the DOM reference
  var contentId = document.getElementById(id);
  // Toggle 
  var i=0
  while(ids[i]) {
    if(id != ids[i]) {
      document.getElementById(ids[i]).style.display = "none";
    } else {
      contentId.style.display = "block";
    }
  }
  contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block"; 
} 

Das Script sollte entsprechend direkt vor dem schließenden body-Tag stehen und nach dem definieren der Funktionen solltest du ini_toggle_content() einmal aufrufen.
Anschließend solltest du (nach meinem Gedankenansatz) deine Button jederzeit Nutzen können. Und auch beliebig viele. Du müsstest du die onClick-Funktion deines Buttons anpassen, sowie die ID des Divs, den du damit "bearbeiten" möchtest.

Ich habs jetzt nicht getestet.
Falls es nicht klappt, musst du mal in die Fehlerkonsole gucken und den fehler entsprechend Googlen oder hier posten...

[twinko]

ich habe es nun auf eine gänzlich andere art und weise gelöst:

<style type="text/css">
<!--
#menu ul, li{
	list-style-type:none;
}
 
#menu #bla1, #bla2,  {
  	display:none;
}
-->
</style>

  <script>
function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'block' ) {
		el.style.display = 'block';
	}	else {
		el.style.display = 'none';
	}
}</script>
              
              <div id="menu">
                <ul>
                  <li><button onclick="toggle('bla2');">1 ein/ausklappen</button></li>
                  <ul id="bla2">
                    <li>blablablablablabla</li>
                    </ul>
                  </ul>
                <li>- Überschrift:<br></li>
                <ul>
                  <li><button onclick="toggle('bla1');">2ein/ausklappen</button></li>
                  <ul id="bla1">
                    <li> BLA BLA BLA</li>
                    </ul>
                  </ul>
                
                </div>

p.s.: ich danke euch für eure hilfe! wirklich super danke danke nochmal, ich hoffe dieses thema hilft später mal wem weiter