Sprungziel zu aufklapptext

Diskutiere Sprungziel zu aufklapptext im HTML Forum im Bereich Programmierung; Hallo zusammen, Bin noch HTML Neuling und teste mich da bisschen aus. Ich möchte aktuell einen texte aufklappen lassen durch das Anklicken von...
S

Sebko

New member
Dabei seit
13.09.2021
Beiträge
2
Hallo zusammen,

Bin noch HTML Neuling und teste mich da bisschen aus. Ich möchte aktuell einen texte aufklappen lassen durch das Anklicken von einem Bild. Aber nicht direkt unter dem Bild, denn zwischen Bild und Aufklapptext steht noch ein kleiner Text, der dort stehen bleiben soll. Hab es mit einem Sprungziel (a href="#clickopen" und <details> mit id="clickopen") versucht, aber der Text klappt dann nicht auf. Also ich hab einen fixen Text, der stehen bleiben soll, darunter befindet sich ein "Mehr dazu" Button, der ein Text aufklappt. Das funktioniert. Nur über dem fixen Text befindet sich ein Bild, der dann denselben Text aufklappen soll wie der "Mehr dazu" Button.

Kann mir da bitte jemand weiterhelfen?

Der Code sieht bisher so aus:

<!DOCTYPE html>
<html>
<div class="Hausmeisterservice"><a href="#clickopen"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/Leistungen/Hausmeisterei1.png" alt="Hausmeisterservice" width="200" height="200" />
<div class="title">Hausmeisterservice</div></div></a>

<br><p style="text-align: center;"><span style="font-size: 14pt;"><strong>Reparaturen, Wartung der Haustechnik, <br />Koordination von Fremdfirmen</strong></span></p>

<details id="clickopen" style="text-align: center;"><summary id="mehr" class="more" style="text-align: center;"><strong>Mehr dazu</strong></summary>
<p style= "text-align: center;" "margin-top: 12px;" >
<ul>
<li class="listssymbol">Kleinreparaturen aller Art</li>
<li class="listssymbol">Bereitstellen und zurückstellen der Mülltonnen bei Abholung</li>
<li class="listssymbol">Reinigung der Mülltonnen bei Bedarf</li>
<li class="listssymbol">Überwachung der Heizanlagen</li>
<li class="listssymbol">Überwachung und Instandhaltung der Haustechnik</li>
<li class="listssymbol">Wartung der Haustechnik</li>
<li class="listssymbol">Ablesen von Zählerständen</li>
<li class="listssymbol">Abwicklung und Überwachung der Brennstofflieferung Öl/Pellets</li>
<li class="listssymbol">Einweisung und Koordination von Fremdfirmen</li>
</ul></p>
</details>
<style>


.Hausmeisterservice {
display: flex;
flex-direction: column;
align-items: center;
}

.Hausmeisterservice:hover {
cursor: pointer;
}

.Hausmeisterservice img {
filter: none;
width: 200px;
height: 200px;
border-radius: 50%;
border: 6px solid AliceBlue;
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
}

.Hausmeisterservice:hover img {
filter: sepia(100%);
}

.title {
font-weight: bold;
font-family: "Montserrat";
font-size: 25px;
color: black;
position: relative;
}

.title::after {
position: absolute;
content: "";
width: 0%;
height: 4px;
background-color: black;
left: 50%;
bottom: -10px;
transition: all 0.4s ease-in-out;
}

.Hausmeisterservice:hover .title::after {
width: 100%;
left: 0;
}
</style>


</html>
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
Kurz gesagt , da möchtest über ein Anker die Details Liste öffnen?
Das muss ich auch erstmal testen.

Du hast aber noch andere Probleme die du beheben mußt ?
<head> = Fehlt
<body> = Fehlt
inline style = veraltet
<style> = muß in headbereich.
"""" = an falschen stellen gesetzt


Das andere muß ich auch erstmal testen weil habe das auch noch nie gebraucht
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
Eine Lösung mit CSS scheint nicht möglich zu sein. Man müsste da mit 2 Details arbeiten, wo eine auf und die andere zu ist . Die könnte man dann mit CSS ein und ausblenden.
Ansonsten muss man halt mit JS nachhelfen, das sollte klappen.
 
S

Sebko

New member
Dabei seit
13.09.2021
Beiträge
2
Hi, vielen Dank für deine Hilfe und deinen Tipps! Ich konnte es nun anderweitig lösen.
Vielen dank :)
 
Thema:

Sprungziel zu aufklapptext

Oben