CCS-Akkordeon

05.02.2019 08:57 (zuletzt bearbeitet: 05.02.2019 21:05)
#1
Ma

...immer wieder interessant, dieses Thema. Der Beitrag muss nicht gelöcht werden!

hier ein paar Beisspielseiten dazu:

- https://designtest-hamburg.jimdo.com/
- https://barcelona-test.jimdo.com/
- https://designtest-malaga.jimdo.com/

Dein Skript sah interessant aus, die Lösung hätte gewisss auch andere User hier interesssiert!

LG, az


 Antworten

 Beitrag melden
06.02.2019 13:55 (zuletzt bearbeitet: 06.02.2019 14:15)
#2
Ma

Na da hast du natürlich Recht, daher hier nochmal der Code:

Seite: https://www.jurablogger.com/testseite (später unter Leistungen zu finden)


CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 

<style type="text/css">
/*<![CDATA[*/
.accordion5 {
width: auto;
margin: 0 auto;
}
 
.accordion5 [type=radio],
.accordion5 [type=checkbox] {
display: none;
}
 
.accordion5 label {
color: #444;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
border-bottom: 0;
border-radius: 5px 5px 0 0;
display: block;
margin: 3px 0 0;
padding: 7px;
background: linear-gradient(#fff,#d8dee4);
box-shadow: 0 1px 1px #000;
transition: all 1s ease-in;
}
 
.accordion5 label:hover {
background: linear-gradient(#fff,#b4bfcb);
color: #444;
}
 
.accordion5 label:before {
content: '»';
padding: 0 12px 0 5px;
}
 
.accordion5 [type=radio]:checked ~ label:before,
.accordion5 [type=checkbox]:checked ~ label:before {
content: '-';
padding: 0 14px 0 7px;
}
 
.accordion5 [type=radio]:checked ~ label + div,
.accordion5 [type=checkbox]:checked ~ label + div {
overflow: auto;
height: 9em;
border-radius: 0 0 5px 5px;
}
 
.accordion5 div {
height: 0;
padding: 0 10px;
overflow: hidden;
background: #fff;
border: 1px solid #929ba5;
transition: all 0.5s ease-in;
}
 
.accordion5 p {
color: #333;
}
 
.accordion5 h3 {
color: #444;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
padding: 5px 10px;
}
 
/*]]>*/
</style>
 

 




HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div class="accordion5">
<section>
<input type="checkbox" id="c1" name="ca" value="" /> <label for="c1">Wozu benötige ich juristische Fachtexte?</label>
<div>
<br />
 
<p>
Unsere Fachbeiträge dienen einerseits zur Schaffung von juristischem Mehrwert, andererseits sorgen Sie mit Hilfe von SEO-Spezifikationen für eine Steigerung Ihrer Google-Platzierung.
</p>
</div>
</section>
 
<section>
<input type="checkbox" id="c2" name="ca" value="" /> <label for="c2">Worauf zielt die Erstellung von juristischem Content ab?</label>
<div>
<p>
Mit unseren Fachbeiträgen können Sie mittels ausgewählter Keywords wie etwa „Strafverteidiger Köln“ oder „Rechtsanwalt Berlin“ eine zielgerichtete Mandantenakquise durchführen. Dank
unserer SEO-Experten werden Sie von den Nutzern gefunden, die bei Google nach Ihrer Fachexpertise suchen.
</p>
</div>
</section>
.
.
.
</div>
 




Den Ursprungscode hab ich von http://www.webdesign-klamonfra.de/codesc...t.php#Artikel12. Nr. 17./18./19. wäre das. Aber ich hab einiges geändert, wie z.B. Farbe, Größe, Schatten usw. Finde es nun viel schöner.


Nun habe ich aber noch ein Problem: Ich hätte gern, dass der Text beim Aufklappen etwas weiter unten erst anfängt. Hierzu hab ich folgende Lösung:

1
2
3
4
5
6
7
8
 
<style type="text/css">
/*<![CDATA[*/
 
p { margin-top: 1em; }
 
/*]]>*/
</style>
 
 



Problem hierbei ist, dass ich das Akkordeon ja später auf einen anderen Seite einfügen will, auf der schon Text besteht. Dieser verändert sich dann natürlich auch - soll er aber nicht. <br> Abstand ist mir zu groß, bekomme ich auch nicht geändert irgendwie. Da ich nicht wirklich ein CSS/HTML Profi bin, weiß ich grad nicht weiter. Kann ich den <p> code irgendwie auf das Akkordeon begrenzen?


 Antworten

 Beitrag melden
06.02.2019 14:53
avatar  az_
#3
avatar
az_

...du kannst das CSS auf den Container begrenzen, z.B.:

1
2
3
4
5
 

.accordion5 section p {
margin-top: 10px;
}
 
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
06.02.2019 16:37
#4
Ma

Super, das hat geklappt. Vielen Dank dir!


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!