Accordion nebo Read More a funkce (CSS,Java,HTML) – Funkcionální programování – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 

12. 11. 2018   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 94.113.183.–
peter
~ Anonymní uživatel
4014 příspěvků
13. 11. 2018   #2
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý