DIV / WIDGET zum Ein- und Ausblenden ?!

09.03.2018 11:00

Karsche
#1

Ka

Hi,

ich habe folgendes Problem:
Ich würde gern folgendes Widget mit einem Link/Button oder sonstigem Ein- und Ausblenden.

Hier der Code meines Widgets:
<div style="text-align:center; margin:auto; background:; padding:0px; opacity: 0.8;" id="widget13">
</div>

<div id="widget13">
</div>
<script type="text/javascript">
//<![CDATA[
new fussballdeWidgetAPI().showWidget('widget13', '022NBQHH54000000VS541L4JVUH0GL26');
//]]>
</script>

Antworten

Beitrag melden

#2

09.03.2018 14:08 (zuletzt bearbeitet: 09.03.2018 14:10)

TiJo
#2

Ti

TiJo

Hallo Karsche,

mir fallen sofort drei Sachen auf:

1. Bitte poste Code immer über den entsprechenden Button (<>) im Menü
2. Du vergibst zweimal die gleiche id an zwei Container (div), warum? ids sollten nur einmal vorkommen.
3. Gib in Zukunft bitte die URL zu deiner Seite an. Damit tun wir uns wesentlich leichter dir zu helfen.

Nun aber zu deinem Problem:

Eine Möglichkeit ist, Elemente über den jquery-Befehl

1
 
.toggle()

ein-und auszublenden.

Was du hierfür tun muss:

Erstelle einen Button mit den Jimdo-Standardelementen.
Geh auf die Besucheransicht und finde über die Browserentwicklungstools die Eigenschaften von dem Button heraus.
Kopiere diese Eigenschaften und füge im Bearbeitungsmodus ein neues Widget mit den Eigenschaft hinzu und ergänze noch id="widget13Button"
Dürfte in etwa so aussehen:

1
2
 
<a id="widget13Button" class="j-calltoaction-link j-calltoaction-link-style-1" style="text-decoration:none" data-action="button" href="/" data-title="Neuer Button">Neuer Button</a>

1
2
 
style="text-decoration:none"

entfernt zb. den Unterstrich unter der Button-Beschriftung.

Dann fügst diesen Code in den Head ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#widget13 {
display:none;
} 
 
</style>
 
<script type="text/javascript">
 
 $("#widget13Button").click(function() {
                $("#widget13").toggle();
</script>
 
 