Toggle

[momo95]

Hallo,

ich habe von dieser Seite die Toggle-Box heruntergeladen und in meine Seite integriert.
Danach noch die Grafiken ausgetauscht.
Nun möchte ich aber das neben meine Grafiken (ein kleines Plus und ein Minus) noch ein Text steht, der sich abwechselt. Z.B. 'mehr...' und 'weniger...'

Könnt ihr mir Helfen oder braucht ihr noch Scripte.

Vielen Dank

 

[momo95]

Hat echt keiner ne Idee?

mit der "function change_boximage" wird die Grafik getauscht. Jetzt hätte ich das gerne auch für einen Text.
hier der Code:

$(function(){
    
    $('.boxes').slideToggle("fast");
    $(".box_head").each(function (i) {
        idelem = $(this).attr('id');
        idelemdiv = idelem.replace('boxhead_', 'box_');
        change_boximage(idelem);
    });


    $('.box_head').click(function(){
        idelem = $(this).attr('id');
        idelemdiv = idelem.replace('boxhead_', 'box_');
        $('#'+idelemdiv).slideToggle("normal");
        change_boximage(idelem);
    });

    $('.box_head').hover(
        function() { $(this).css('cursor', 'pointer'); },
        function() { $(this).css('cursor', 'default'); }
    );
});

function change_boximage(elem){
    src = $('#'+elem).attr('src');
    if (src.indexOf("_open") >= 0){
        src = src.replace('_open', '_close');
    } else {
        src = src.replace('_close', '_open');
    }
    src = $('#'+elem).attr('src', src);
}

Und hier dir HTML. Wenn ich auf "mehr..." klicke, klappt es zwar auf und zu, aber ich hätte dann gerne diese Wort durch "weniger..." ersetzt

<img src="images/news_open.gif" alt="mehr" id="boxhead_news" class="box_head" /> <span id="boxhead_news" class="box_head">mehr...</span>    
<div id="box_news" class="boxes">
der text, der aufgeklappt wird
</div>

 

[DarkDragon193]

Das ist zu simpel... Wenn du keine Ahnung hast, was da vor sich geht, kann ich die Frage verstehen, ansonsten ist die Antwort so nahe liegend, dass dieses Posting schon unnötig wird.
Überhaupt sehe ich da schon einen... naja, halben Fehler. XML ist das völlig egal und gibt glaube ich bloß eine Warnung aus. Für dich als Entwickler hat das allerdings Konsequenzen:

<img ... id="boxhead_news" /> <span id="boxhead_news">...</span>

Das heißt hier, dass img seine id verliert und span sie bekommt, da eine ID einmalig ist. Oder vielleicht wird die 2. Zuweisung ja auch einfach ignoriert, ich weiß nicht.

Du könntest nun die ID deines <span>s ändern zu "boxheadtext_news" und diese dann wie in deinem Code mit

idelemtxt = idelem.replace('boxhead_', 'boxheadtext_');

erfassen und mit einer weiteren Funktion wie

function change_boxheadtext(elem){
    var elem = document.getElementById( elem );
    if( elem.textContent === 'weniger...' )
        elem.innerHTML = "mehr...";
    else
        elem.innerHTML = "weniger...";
}

ändern.

 

[momo95]

Hallo, vielen Dank für deine Hilfe.

meine HTML sieht jetzt so aus:

<img src="http://www.html.de/images/news_open.gif" alt="mehr" id="boxhead_news" class="box_head" /> <span id="boxheadtext_news">weniger...</span>    
<div id="box_news" class="boxes">
text bla bla
</div>

Und die JS-Datei:

$(function(){
    
    $('.boxes').slideToggle("fast");
    $(".box_head").each(function (i) {
        idelem = $(this).attr('id');
        idelemdiv = idelem.replace('boxhead_', 'box_');
        idelemtxt = idelem.replace('boxhead_', 'boxheadtext_');
        change_boximage(idelem);

    });


    $('.box_head').click(function(){
        idelem = $(this).attr('id');
        idelemdiv = idelem.replace('boxhead_', 'box_');
        $('#'+idelemdiv).slideToggle("normal");
        idelemtxt = idelem.replace('boxhead_', 'boxheadtext_');
        change_boximage(idelem);

    });

    $('.box_head').hover(
        function() { $(this).css('cursor', 'pointer'); },
        function() { $(this).css('cursor', 'default'); }
    );
});

function change_boximage(elem){
    src = $('#'+elem).attr('src');
    if (src.indexOf("_open") >= 0){
        src = src.replace('_open', '_close');
    } else {
        src = src.replace('_close', '_open');
    }
    src = $('#'+elem).attr('src', src);
}

function change_boxheadtext(elem){
    var elem = document.getElementById( elem );
    if( elem.textContent === 'weniger...' )
        elem.innerHTML = "mehr...";
    else
        elem.innerHTML = "weniger...";
}

Funktioniert aber leider immernoch nicht. Außerdem hätte ich es gerne, dass man auch auf "mehr..." oder "weniger..." klicken kann, um die funktion zu starten.

Was habe ich falsch gemacht?

 

[momo95]

Ich brauche echt Eure Hilfe, weil ich keine ahnung von JS habe.

Bitte!