Accordion funkce, nebo Read more... (CSS,HTML,Java)

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod foxfoxfox 12. 11. 2018 16:17

Ahoj, mám takový problém - ve Wordpressu upravuju šablonu Illdy přes CSS , a vlastně už všechno ostatní mám hotovo - zůstal mi tam jeden háček. V sekci Team jsou malé profily s popiskem a fotkou - no a u jednoho člověka mám popisek fakt dlouhý, a potřeboval bych tam udělat buď " ... read more " nebo nějaký accordion .

Šablona je single page, takže sekce team je vlastně widget. Přes Customize se dostanu k textu, kde mi nejdou vkládat shortcody , ale přepnu do html , kde jsem napsal toto :

<span style="color: white">Tetuju od roku 2000 a specializuju se na custom neotraditional tattoo větších rozměrů. </span><a class="accordion-header" role="accordion" rel="nofollow" href="#first">
<p> ... read more</a></p>
<div id="first" class="accordion-content">


<p class="accordion">
Patřím k předním( dlouhý text ) vytvořil..
</p>
</div>

Vím že v tomhle jsou chyby, ale zkoušel jsem hodně variant, můžu tady hodit klidně i jiné možnosti toho jakoby "buttonu" nebo horní části accordeonu. Ten jsem ale nějak udělal, bohužel už nedokážu rozchodit funkci accordenu - nebo jakoby otevření (odkrytí) zbytku textu. V CSS jsem mám toto(vrch patří ke collapsibles/expandu které jsem taky zkoušel ale nefungovaly mi .


.collapsible {
background-color: #000000;
color: #750000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #000000;
}
.content {
padding: 0 18px;
display: none;
overflow: visible;
background-color: #000000;
}
#team .section-content .person .person-content p {
color: #000000;
}
button {
background-color: #000000;
}
.accordion {
background-color: #000000;
color: #ffffff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
overflow:hidden;
}
.active,
.accordion:hover {
background-color: #800000;
color: #ffffff;
}
.panel {
padding: 18px;
display: none;
background-color: #000000;
overflow: hidden;
color: #ffffff;
}

.accordion-content:target {
padding: 20px;
}
#first.accordion-content {
height: 0px;
overflow: hidden;
padding: 0px;


.... zkoušel jsem taky návod z https://www.w3schools.com/howto/howto_js_accordion.asp - přes nějaký WP plugin jsem zkusil přidat funkci , ale nevím zda-li úspěšně. Nevím totiž jak přesně funkce tvořit,a kam je vkládat (který soubor v FTP přepisovat,v jakém tvaru funkci vložit). Může mi s tím prosím někdo zkusit poradit ? Jde vlastně o to, sladit html kodovani v textu z customizeru s CSS a nějakou funkcí v Javascriptu nebo jquerry. Budu neskutečně moc vděčný za jakoukoliv radu, tip, nebo pomoc ! :)

Upravovaný web : http://www.freihand.cz

Obrázek
foxfoxfox
Kolemjdoucí

Odeslat příspěvekod Haunter 19. 8. 2019 15:04

Něco takového?
https://api.jquery.com/slideToggle/ ah, vidím, že to máš vyřešeno. BTW, ta fotka na pozadí je má obrovskou velikost :D
Haunter
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků