hlmod.hu

Magyar Half-Life Mód közösség!
Pontos idő: 2024.04.27. 20:27

Megválaszolatlan témák | Aktív témák



» » »


Navigáció
Jelenlévő felhasználók

Jelenleg 538 felhasználó van jelen :: 2 regisztrált, 0 rejtett és 536 vendég

A legtöbb felhasználó (1565 fő) 2020.11.21. 11:26-kor tartózkodott itt.

Regisztrált felhasználók: Bing [Bot], Majestic-12 [Bot] az elmúlt 5 percben aktív felhasználók alapján

Utoljára aktív
Ahhoz hogy lásd ki volt utoljára aktív, be kell jelentkezned.



Az oldal teljeskörű
használatához regisztrálj.

Regisztráció

Kereső


Új téma nyitása  Hozzászólás a témához  Oldal: 1 / 1
  [ 5 hozzászólás ] 
  Nyomtatóbarát verzió | Barát értesítése e-mailben Előző téma | Következő téma 
Szerző Üzenet
*GrafitY*
 Hozzászólás témája: Accordion [alapból aktív]
HozzászólásElküldve: 2017.07.08. 19:47 
Offline
GFX-Designer
Avatar

Csatlakozott: 2015.03.12. 15:06
Hozzászólások: 624
Megköszönt másnak: 199 alkalommal
Megköszönték neki: 78 alkalommal
Sziasztok!
Hogyan tudnám megoldani, hogy alapól aktívak legyenek a panelek?
Adott a következő: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol
Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. button.accordion {
  6.     background-color: #eee;
  7.     color: #444;
  8.     cursor: pointer;
  9.     padding: 18px;
  10.     width: 100%;
  11.     border: none;
  12.     text-align: left;
  13.     outline: none;
  14.     font-size: 15px;
  15.     transition: 0.4s;
  16. }
  17.  
  18. button.accordion.active, button.accordion:hover {
  19.     background-color: #ddd;
  20. }
  21.  
  22. button.accordion:after {
  23.     content: '\002B';
  24.     color: #777;
  25.     font-weight: bold;
  26.     float: right;
  27.     margin-left: 5px;
  28. }
  29.  
  30. button.accordion.active:after {
  31.     content: "\2212";
  32. }
  33.  
  34. div.panel {
  35.     padding: 0 18px;
  36.     background-color: white;
  37.     max-height: 0;
  38.     overflow: hidden;
  39.     transition: max-height 0.2s ease-out;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44.  
  45. <h2>Accordion with symbols</h2>
  46. <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
  47. <button class="accordion">Section 1</button>
  48. <div class="panel">
  49.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  50. </div>
  51.  
  52. <button class="accordion">Section 2</button>
  53. <div class="panel">
  54.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  55. </div>
  56.  
  57. <button class="accordion">Section 3</button>
  58. <div class="panel">
  59.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  60. </div>
  61.  
  62. <script>
  63. var acc = document.getElementsByClassName("accordion");
  64. var i;
  65.  
  66. for (i = 0; i < acc.length; i++) {
  67.  acc[i].onclick = function() {
  68.    this.classList.toggle("active");
  69.    var panel = this.nextElementSibling;
  70.    if (panel.style.maxHeight){
  71.      panel.style.maxHeight = null;
  72.    } else {
  73.      panel.style.maxHeight = panel.scrollHeight + "px";
  74.    }
  75.  }
  76. }
  77. </script>
  78.  
  79. </body>
  80. </html>
GeSHi © Codebox Plus

_________________
„Nem azért felejtünk el játszani, mert megöregszünk, hanem attól öregszünk meg, hogy elfelejtünk játszani.”

-MAXHACKED Website-
-HERViD Website-
► Spoiler mutatása


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólás az előzmény idézésével  
Silent
 Hozzászólás témája: Re: Accordion [alapból aktív]
HozzászólásElküldve: 2017.07.08. 20:01 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Amennyiben ehhez is VanillaJS-t szeretnél használni, itt egy példa:

Annak az accordion-nek adsz egy "openMeOnStart" id-t, amit le akarsz nyitni alapból.

Utána pedig valami ilyesmi:
Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <script>
  2.  
  3. var myAccordion = document.getElementById("openMeOnStart");
  4. var panel = myAccordion.nextElementSibling;
  5. panel.style.maxHeight = panel.scrollHeight + "px";
  6.  
  7. var acc = document.getElementsByClassName("accordion");
  8. var i;
  9.  
  10. for (i = 0; i < acc.length; i++) {
  11.   acc[i].onclick = function() {
  12.     this.classList.toggle("active");
  13.     var panel = this.nextElementSibling;
  14.     if (panel.style.maxHeight){
  15.       panel.style.maxHeight = null;
  16.     } else {
  17.       panel.style.maxHeight = panel.scrollHeight + "px";
  18.     }
  19.   }
  20. }
GeSHi © Codebox Plus


Edit:

Összeraktam egy jsfiddle példát:

https://jsfiddle.net/vnvrok6d/


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólás az előzmény idézésével  
*GrafitY*
 Hozzászólás témája: Re: Accordion [alapból aktív]
HozzászólásElküldve: 2017.07.08. 20:21 
Offline
GFX-Designer
Avatar

Csatlakozott: 2015.03.12. 15:06
Hozzászólások: 624
Megköszönt másnak: 199 alkalommal
Megköszönték neki: 78 alkalommal
Igen, de ez csak egyszerre csak egy accordionnál használ.

_________________
„Nem azért felejtünk el játszani, mert megöregszünk, hanem attól öregszünk meg, hogy elfelejtünk játszani.”

-MAXHACKED Website-
-HERViD Website-
► Spoiler mutatása


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólás az előzmény idézésével  
Silent
 Hozzászólás témája: Re: Accordion [alapból aktív]
HozzászólásElküldve: 2017.07.09. 08:59 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Ha az összeset nyitod:

https://jsfiddle.net/mgLx7c19/


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólás az előzmény idézésével  
*GrafitY*
 Hozzászólás témája: Re: Accordion [alapból aktív]
HozzászólásElküldve: 2017.07.09. 15:11 
Offline
GFX-Designer
Avatar

Csatlakozott: 2015.03.12. 15:06
Hozzászólások: 624
Megköszönt másnak: 199 alkalommal
Megköszönték neki: 78 alkalommal
Silent írta:
Ha az összeset nyitod:

https://jsfiddle.net/mgLx7c19/


Sikerült, köszönöm!

_________________
„Nem azért felejtünk el játszani, mert megöregszünk, hanem attól öregszünk meg, hogy elfelejtünk játszani.”

-MAXHACKED Website-
-HERViD Website-
► Spoiler mutatása


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólás az előzmény idézésével  
Hozzászólások megjelenítése:  Rendezés  
Új téma nyitása  Hozzászólás a témához  Oldal: 1 / 1
  [ 5 hozzászólás ] 

» » »


Ki van itt

Jelenlévő fórumozók: nincs regisztrált felhasználó valamint 7 vendég

Nyithatsz új témákat ebben a fórumban.
Válaszolhatsz egy témára ebben a fórumban.
Nem szerkesztheted a hozzászólásaidat ebben a fórumban.
Nem törölheted a hozzászólásaidat ebben a fórumban.
Nem küldhetsz csatolmányokat ebben a fórumban.

Keresés:
Ugrás:  
Powered by phpBB® Forum Software © phpBB Limited
Magyar fordítás © Magyar phpBB Közösség
Portal: Kiss Portal Extension © Michael O'Toole