Accordion nebo Read More a funkce (CSS,Java,HTML) – Funkcionální programování – Fórum – Programujte.com

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

Připojen obrázek.

Ono je hrozne tezke pochopit, co vlastne chces, protoze pouzivas spoustu cizizch slov, ktere s tematem nesouvisi. Jsou specializovane nejspis v duchu tematu stranky :)

Ja bych mozna sel do clip.
https://www.jakpsatweb.cz/css/clip.html
https://www.jakpsatweb.cz/…y/clip2.html

.prvek {clip: rect(20px 120px 80px 50px); width: 200px; height: 100px;}
.prvek:hover {clip: rect(0); width: 200px; height: auto;}

Navic, bych zvazil zkraceni textu na ruzna hesla. A az po rozkliknuti bych zobrazil nejaky osobni profil ve stylu soc. site linked-in.