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

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

div.menu li:hover {...}

google = css submenu navigation
napr:
http://css-snippets.com/…-navigation/
https://stackoverflow.com/…ith-submenus

Rozklikavaci jsem nekde videl taky jen pomoci css3, ale ta se delaji obvykle javascriptem
google = css submenu navigation click
http://koen.kivits.com/…re-css-menu/
google = css submenu click navigation without javascript
https://codepen.io/Tont/pen/hdsev
transition:max-height 0.5s ease-out;
transition:background .3s;

#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

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">...

#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>

#4 peter
takto by to mělo vypadat v reálu.

Připojen obrázek.

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 :)

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