Gjemme og vise tekst når link blir klikket

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009

er det jQuery man benytter når man skal gjemme tekst?

Greia er at jeg har forskjellige kategorier. Og jeg vil helst slippe å ha en evig lang side samt at jeg vil slippe å ha flere sider da det kun er en kjapp beskrivende tekst/punktliste til hver kategori.

Skjønner hva jeg tenker på?

EDIT:  fikk det til med javascript og css.display...

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
jQuery

Ja, skjønner hva du tenker på. F.eks. slik;

Widgets A
 A widget 1
 A widget 2
 A widget 3
Widget B
 B widget 1
 ...

Så når man trykker på A eller B så kommer underelementene til syne. Man kan bruke JavaScript (evt, jQuery) for dette, ja.

Sjekk metoden click i jQuery, med den kan du velge hva som skal skje gitt at en person klikker på en link (og du kan bestemme hva som skal skje, f.eks. ved hjelp av ID attributten på linken, class attributten eller href-attributten.

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Benyttet meg av

Benyttet meg av denne:

function unhide(list_category_hiddenElement) {
  var item = document.getElementById(list_category_hiddenElement);
  if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}

Når jeg har mange kategorier, hvordan på lettest mulig måte kan jeg benytte meg av funksjonen?

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Først: Skal hovedelementene

Først: Skal hovedelementene dine også være linker til spesielle sider? Altså, når man trykker på linken så skal man komme til en ny side, samt. at kategoriene skal utvides? Eller skal klikk på moderelementene kun utvide listen nedenfor?

Den beste måten å gjøre dette på er å nøste elementer slik i HTML:

<ul>
  <li>
    <a href="foo" title="bar" id="exp-1" class="exp">hovedelement 1</a>
    <ul class="nested-cat">
      <li>
          <a href="foo" title="bar">underelement 1</a>
      </li>
      <li>
          <a href="foo" title="bar">underelement 2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="foo" title="bar" id="exp-2" class="class="exp">hovedelement 2</a>
    <ul class="nested-cat">
      <li>
          <a href="foo" title="bar">underelement 1</a>
      </li>
      <li>
          <a href="foo" title="bar">underelement 2</a>
      </li>
    </ul>
  </li>
</ul>

Har du laget kategoriene dine på den måten? I såfall er det mye enklere å kode dette i jQuery.

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Oppbyggning av kategorier i HTML

Oppbyggingen er slik:

<ul>
  <li><a href="javascript:unhide('hiddenContent_cat1');">kategori 1</a></li>
  <div id="hiddenContent_cat1">Kjapp beskrivelse</div>
  <li><a href="javascript:unhide('hiddenContent_cat2');">kategori 2</a></li>
  <div id="hiddenContent_cat2">Kjapp beskrivelse</div>
  <li><a href="javascript:unhide('hiddenContent_cat3');">kategori 3</a></li>
  <div id="hiddenContent_cat3">Kjapp beskrivelse</div>
  ...
</ul>

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Best praksis med JavaScript og listemarkup

Ikke bruk JavaScript blandet med HTML på den måten, det er ikke en clean måte å gjøre det på (du dør ikke av å gjøre det, men best praksis er å inkludere JavaScript i head etter andre ressurser som stylesheets osv. Grunnen er at nettleseren stopper å laste inn andre ressurser inntil den har lastet inn JavaScript-dokumentene, dermed blir sidene tregere).

Følg praksisen jeg har vist ovenfor. Du kan gi dem hva slags navn du vil, men det viktigste er at

  1. Linkene som skal vise nye kategorier har en felles class
  2. De uornende listene som skal skjules har en felles class

Det er fordi vi bruker jQuery til å skjule alle listeelementene som skal skjules når dokumentet er lastet inn (dermed vil ikke de listene være skjult for brukere som ikke har JavaScript). Videre skal vi utføre noen oppgaver (vise/skjule) elementer når man trykker på en av linkene som har den nevnte classen.

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
skal se nærmere på det i

skal se nærmere på det i morgen tidlig... nå er det natta for min del...

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Utvide kategorier med jQuery

Pingle, hehe :) Skal hjelpe deg å sette opp jQuery så det fungerer bedre - da er det lettere å utvide antallet kategorier senere også.

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
en god natt med søvn er bra;)

en god natt med søvn er bra;) hehee...

hvor går jeg i gang? så skal jeg se hvor langt jeg kommer på egen hånd her...

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Åpne og lukke lister i jQuery.

Sove kan man gjøre når man er død, (vet det, barnslig å si, men nå er jeg overtrøtt så da er det lov).

Ok, pointere: Sett opp listeelementene som anvist ovenfor, bruk jQuery til å skjule alle undermenyene når dokumentet er lastet. Videre må du avgjøre hvorvidt undermenyen skal åpnes eller lukkes når link klikkes, og hvilken liste som hører til den klikkede linken. :) For smooth effekt kan du bruke slideUp() og slideDown().

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.