• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Mehrfacher -mehr anzeigen- Button

O

Obelix997

Neues Mitglied
Hallo,

bin momentan eine Homepage über den 1 und 1 Website Builder am erstellen -soweit so gut läuft bis jetzt alles Prima.
Habe dort ein kleines Bestellformular erstellt, welches auch funktioniert.

Meine Frage nun:

Habe in dem Bestellformular eine Überschrift um welches Produkt es sich handelt und würde gerne da hinter eine Option machen mit mehr anzeigen und weniger einzeigen (sodass die Kunden eine genauere Beschreibung über das Produkt bekommen).

Soweit so gut habe mich im Internet informiert (bin Anfänger in html) und habe diesen code gefunden:


<p><span id="an" onclick="document.getElementById('text').style.display='block';document.getElementById('an').style.display='none';document.getElementById('zu').style.display='block'" style="cursor:pointer;">aufklappen</span> <span id="zu" onclick="document.getElementById('text').style.display='none';document.getElementById('an').style.display='block';document.getElementById('zu').style.display='none'" style="display: none;cursor:pointer">zuklappen</span></p>


<div id="text" style="display: none">DER TEXT</div>


Dieser funktioniert auch, nur wenn ich ihn beim 2 Produkt einsetzte und dort meine Beschreibung eingebe und bei der Homepage vorschau auf dem 2 Produkt auf mehr anzeigen klicke kommt als der Beschreibungstext von dem 1 Produkt obwohl eigentlich die von dem 2 Produkt kommen müsste.

Habe mich im Internet weiter informiert und andere Codes gefunden diese funktionierten aber nicht, beim weiteren surfen habe ich entdeckt man müsste die ID ändern (ID1, ID2, ID3 ....) nur ich weiß nicht wo ich in dem obengenannten Code die id finde.

Könnt ihr mir helfen, bin echt ratlos? und bitte nicht zu kompliziert bin echt Anfänger auf diesem Gebiet.

Danke schonmal :)
 
Werbung:
Werbung:
Soweit so gut, nur hab ich jetzt das Problem der öffnet jetzt die unterschiedlichsten Produktbeschreibung nur beim zuklappen gibt es Probleme beim 1 Produkt zeigt er das zuklappen an und beim 2,3, ..... ist es nicht mehr da.

Aber so stimmt das doch:

<p><span id="an" onclick="document.getElementById('text8').style.display='block';document.getElementById('an').style.display='none';document.getElementById('zu').style.display='block'" style="cursor:pointer;">aufklappen</span> <span id="zu" onclick="document.getElementById('text8').style.display='none';document.getElementById('an').style.display='block';document.getElementById('zu').style.display='none'" style="display: none;cursor:pointer">zuklappen</span></p>


<div id="text8" style="display: none">DER TEXT</div>

oder wo muss hier noch z.b. eine 8 hin damit es eine andere ID ist ?


Anzumerken ist noch das die einzelnen immernoch mit dem Produkt 1 in die quere kommen, wenn ich bei Produkt 2 auf aufklappen gehe kommt die Produktbeschreibung und bei Produkt1 wird das aufklappen zum zuklappen.
 
Zuletzt bearbeitet:
Schon, aber wenn du lediglich nach copy&paste Scripts suchst, ohne Interesse an der Materie zu zeigen, hält sich die Hilfsbereitschaft in Grenzen.

Anyway, das wäre ein einfacher Ansatz:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <meta charset="utf-8">
  <style>
      h1 {cursor: pointer;}
      p {display: none;}
  </style>
</head>
<body>
  <div>
      <h1>Chapter 1</h1>
      <p>Chapter 1 details</p>
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $('h1').on('click', function() {
        $(this).next('p').slideToggle();
    });
</script>
</body>
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben