Rozbalovací parametry produktu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Rozbalovací parametry produktu – CSS – Fórum – Programujte.comRozbalovací parametry produktu – CSS – Fórum – Programujte.com

 

Spuštěný nový filmový web Filmožrouti.cz — vše o Avengers, Pacific Rim, Thor, Star Wars…
Martin
~ Anonymní uživatel
1443 příspěvků
5. 10. 2017   #1
-
0
-

Poprosil bych vás, jestli by jste mi někdo neporadil, jestli jde nějak udělat v css rozbalovací pole s parametry produktu? Má to třeba alza tady https://www.alza.cz/…d5114802.htm

uvnitř popisu produktu. Díky moc

Nahlásit jako SPAM
IP: 78.136.136.–
peter
~ Anonymní uživatel
2921 příspěvků
6. 10. 2017   #2
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:258:5405:65...–
Martin
~ Anonymní uživatel
1443 příspěvků
6. 10. 2017   #3
-
0
-

#2 peter
Moc děkuji za odpověď, ale asi jsem to špatně napsal. Nejedná se mi o menu, ale o rozbalovací parametry u nějakého produktu, kde je třeba hodně parametrů, aby to nebylo rozepsané já nevím na jak dlouhé stránce. Mají to přesně na té stránce, vyhledejte si na ní "Parametry a specifikace"  https://www.alza.cz/huawei-p10?dq=4745332

Nahlásit jako SPAM
IP: 78.136.136.–
peter
~ Anonymní uživatel
2921 příspěvků
9. 10. 2017   #4
-
0
-

No, a zkousel jsi to googlovat? Mi prijde obcas, ze tu ucim deti googlovat :)
google = javascript show more example
javascript show more jquery

https://css-tricks.com/forums/topic/jquery-read-more-less-toggle/
->
https://codepen.io/…/bqLaJm ;

<style>
.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

.read-more-toggle {
  display: none;
}

.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  padding: 5px;
  margin: .5em;
  font-size: .8em;
  background: #555;
  color: white;
}

.read-more-toggle-label:after {
  content: "More";
  display: inline-block;
}

.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
	than the content */
  max-height: 1000px;
}

.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less";
}

article {
  border-bottom: 1px solid black;
}

article p {
  margin-bottom: .5em;
}
</style>
<p>fff</p>
  <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox">
 
  <div class="read-more-content">...
Nahlásit jako SPAM
IP: 2001:718:2601:258:996c:42...–
Martin
~ Anonymní uživatel
1443 příspěvků
9. 10. 2017   #5
-
0
-

#4 peter
Předně děkuji za odpověď, moje otázka ale nemá nic společného s googlem. Kdybych přesně věděl, jak to nazvat, najdu si to. Podotýkám, že se teprve učím, tak se prosím nezlob:-) Z Tvé odpovědi jsem to moc nepochopil. Je mi jasné, že to mezi style jsou třídy, které si vložím do css a použiju je potom v html u zobrazeného popisu produktu. Jde mi konkrétně o tohle, mám v html tabulku s x parametry, v této tabulce konkrétně s parametry 1-9 a já potřebuju, aby se na stránce produktu zobrazilo pouze třeba parametr 1-4 a pod tím pak bylo tlačítko (rozbalit vše) a kliknutím se tabulka zobrazila celá. Přesně tak jako je to v tom odkazu na alzu v mém prvním postu. Díky moc a ber proím v podtaz, že se to opravdu teprve učím.

<table style="height: 97px; width: 100%;">
<tbody>
<tr>
<td>Parametr 1</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 2</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 3&nbsp;</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 4</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 5</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 6</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 7</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 8</td>
<td>&nbsp;odpověď</td>
</tr>
<tr>
<td>Parametr 9</td>
<td>&nbsp;odpověď</td>
</tr>
</tbody>
</table>

Nahlásit jako SPAM
IP: 78.136.135.–
Martin
~ Anonymní uživatel
1443 příspěvků
9. 10. 2017   #6
-
0
-
Nahlásit jako SPAM
IP: 78.136.135.–
peter
~ Anonymní uživatel
2921 příspěvků
10. 10. 2017   #7
-
0
-

Njn, ono forko forko zmrsilo ten odkaz. Ale na te predchozi strance bys to nasel

https:// codepen.io / Mottie / pen/bqLaJm

Je tam i ukazka, staci pod temi cernymi ramecky kliknout na "Read more" tlacitka.
S tabulkou je problem ten, ze nejde delit. Takze to bud udelat jako 2 tabulky, stejne sirky sloupcu a nebo dve tabulky, jedna kratka a druha se vsim a jen je vymenit, treba pres css display.

Se nezlobim, mam v povaze mrzutost a nijak mi nevadi :)

Nahlásit jako SPAM
IP: 2001:718:2601:258:47e:deb...–
peter
~ Anonymní uživatel
2921 příspěvků
10. 10. 2017   #8
-
0
-

Nebo jeste se da u tabulky pouzit ohraniceni divem a schovat ji pres overflow. Vetsinou o resim javascriptem, takze css reseni ti neporadim.

Nahlásit jako SPAM
IP: 2001:718:2601:258:47e:deb...–
Zjistit počet nových příspěvků

Přidej příspěvek

×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, 3 hosté

 

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