[GastForen Programmierung/Entwicklung JavaScript Toggle Boxen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Toggle Boxen

KatSe
Beiträge gesamt: 48

24. Jan 2019, 20:45
Beitrag # 1 von 2
Bewertung:
(736 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo zusammen,
ich weiß nicht, ob das hier der richtige Ort ist. Aber ich verzweifel grad.
Ich baue bei WIX eine Webseite auf.
Ja ich weiß, sehr dilettantisch.
Nun muss ich eine Box hinbekommen, die sich aufklappt und Text zeigt.
Mit der Hilfe auf der Seite komme ich nicht weiter.
Ich kann zwar Text aufklappen. Aber sobald ich den Button anklicke verschwindet der Text inkl. Button.
Vielleicht hat jemand einen Rat?

Viele Grüße
Katrin

Hier mal der Code:


let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text




$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 14;
// read the full text and store it in the fullText variable
fullText = $w("#text29").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text29").text = shortText;


});

export function button1_click(event) {
// display the full text
$w("#text29").text = fullText;
// collapse the button
$w("#button1").collapse();

// check the contents of the text element
if ($w("#text29").text === shortText) {
// if currently displaying short text, display the full text
$w("#text29").text = fullText;
$w("#button1").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#text29").text = shortText;
$w("#button1").label = "Show more";
}
}
Hier Klicken X

Toggle Boxen

crisies
  
Beiträge gesamt: 110

4. Apr 2019, 20:15
Beitrag # 2 von 2
Beitrag ID: #569643
Bewertung:
(173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Katrin,

sofern man nicht auch noch den entsprechenden HTML Code dafür sieht, könnte man versuchen zu raten, doch das ist vermutlich nicht ganz korrekt ;)

Aber generell machst Du beim Click auf den Button folgendes:
// display the full text
$w("#text29").text = fullText;
// collapse the button
$w("#button1").collapse();
=> also zeigst immer den Vollen-Text und machst Button.collapse(). Danach kommt ein If welcher immer wieder den Short-Text zeigen würde. Also versuche das evlt. mal so:

Code
export function button1_click(event) { 
// check the contents of the text element
if ($w("#text29").text == shortText) {
// if currently displaying short text, display the full text
$w("#text29").text = fullText;
$w("#button1").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#text29").text = shortText;
$w("#button1").label = "Show more";
}
}


lg
chris.w

*************************************
Chris Würsch
http://www.chriswuersch.com
*************************************


als Antwort auf: [#568694]

Aktuell

Veranstaltungen

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen. pdf-icon Hier eine kleine Anleitung.

Veranstaltungen
26.04.2019

Äh, der Kunde hat leider kein InDesign… Aber Office!

HUSS-MEDIEN GmbH
Freitag, 26. Apr. 2019, 17.00 - 20.00 Uhr

Vortrag

Willkommen zur ersten IDUGB im Jahr 2019. Und gemäß Heikes Ansatz, dass die IDUG „mehr als InDesign“ ist, schauen wir dieses Mal ein wenig über den Tellerrand. Okay, auch wenn wir gern über Office lächeln: Es muss jetzt mal sein Egal was man von Office hält, als InDesign-Anwender*in kommt man immer wieder in Kontakt zu Word, Excel und PowerPoint. Es fängt bei Texten und Tabellen an, die in InDesign verarbeitet werden wollen, bis hin zu PowerPoint-Vorlagen im Corporate Design, die Kunden bestellen. Teil 1: Was kann Office alles, was können wir eventuell nutzen? Keine Angst: Ihr müsste jetzt nicht zum Office-Crack werden. Dann dafür gibt es ja Leute, wie Stephan! Er wird euch helfen, zeigt euch im ersten Teil des Abends maßgeblich, was Office so alles kann, was aber auch nicht. Es geht um ganz klassische Frage von InDesigner*innen – gibt es Grundlinienraster, Schnittmasken oder Sonderfarben? Daneben gib es aber auch Grundlegendes, z.B. wie man überhaupt mit der Arbeit in Office loslegt, wo man wichtige Einstellungen findet und wie dieses Office überhaupt so tickt. Wenn Ihr also mal Dokumentenvorlagen für Kunden gestaltet, kennt ihr schon die Möglichkeiten und könntet schon während der Gestaltungsphase auf die Besonderheiten eingehen. Aber Keine Angst, es gibt immer noch genug für uns in InDesign zu tun!

Vollständige Informationen und Anmeldung via https://idug-berlin.de/idugb44/

Ja

Organisator: InDesign User Group Berlin

Kontaktinformation: InDesign User Group Berlin, E-Mailmail AT idug-berlin DOT de

https://idug-berlin.de

Veranstaltungen
06.05.2019 - 07.05.2019

Stuttgart
Montag, 06. Mai 2019, 09.30 Uhr - Dienstag, 07. Mai 2019, 17.30 Uhr

Schulung, Seminar

Unsere Schulung „Zweitägige Weiterbildung zum Cleverprinting-Reinzeichner“ bietet allen Anwendern, die in Agenturen oder freiberuflich als Reinzeichner bzw. in der Reinzeichnung arbeiten, topaktuelles Grafik- und PrePress-Fachwissen rund um das Thema „Druckdatenerstellung mit InDesign, Photoshop, Acrobat“.

Ja

Organisator: Cleverprinting.de

Zweitägige Weiterbildung zum Cleverprinting-Reinzeichner