CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

steenolsen1 Nybegynder

11. december 2010 - 17:10 Der er 7 kommentarer og
1 løsning

jQuery - fra hidden til slidein

Hej

Jeg arbejder på et bestillingsflow og vil gerne kunne vise forskellige formularer alt efter om en kunde indikerer at han er privat eller erhvervskunde.
Jeg er kun lige gået igang og har lavet nedenstående kode, hvor jeg tester af om jeg kan finde ud af at slide ind/ud med jQuery. Det går fint på nær en ting: div laget med class="hidden" er vist som standard, hvor jeg gerne vil have det skjulet indtil man har valgt privat/erhverv.
Kan du hjælpe?

<input type="radio" name="customer_type" class="clickcall" id="customer_type_1">Privat<br />
<input type="radio" name="customer_type" class="clickcall" id="customer_type_2">Erhverv<br />

<div class="hidden">
<div class="contentcall" id="customer_private"><h1>Her kommer privat</h1></div>
<div class="contentcall" id="customer_business"><h1>Her kommer erhverv</h1></div>
</div>

<script>
$('.clickcall').click(function(){
$('.contentcall').hide();
if($(this).attr('id') == "customer_type_1")
$('#customer_private').slideToggle("fast");
if($(this).attr('id') == "customer_type_2")
$('#customer_business').slideToggle("fast");
})
</script>

På forhånd tak!
Steen

Synes godt om

martiinkolle Nybegynder

12. december 2010 - 12:45 #1

hvordan ser din css ud? :p

<div class="hidden"> referere til din css fil. Prøv at ændre til det her:

<div style="display: none;">
<div class="contentcall" id="customer_private"><h1>Her kommer privat</h1></div>
<div class="contentcall" id="customer_business"><h1>Her kommer erhverv</h1></div>
</div>

<script>
$('.clickcall').click(function(){
$('.contentcall').hide();
if($(this).attr('id') == "customer_private")
$('#customer_private').slideToggle("fast");
if($(this).attr('id') == "customer_business")
$('#customer_business').slideToggle("fast");
})
</script>

Synes godt om

steenolsen1 Nybegynder

12. december 2010 - 15:15 #2

Den er jeg godt med på - det er alene jQuery der volder mig problemer.

Hvis jeg ændrer CSS'en til at være display:none så er det bare permanent væk - uanset om jeg klikker eller ej. Løsningen er jeg ret sikker på skal findes i selve jQuery'en.

Synes godt om

martiinkolle Nybegynder

12. december 2010 - 15:30 #3

kan du ikke poste hele din kode. Så er det lidt nemmere at finde fejlen.

men ellers kan du prøve at tage et kig her http://stackoverflow.com/questions/2637025/jquery-select-onchange-to-slide-in-slide-out-div-or-form.

eller den her.
http://www.questionhub.com/StackOverflow/1794652

Det er begge simple koder, som er nemme at bygge videre på.

Synes godt om

steenolsen1 Nybegynder

12. december 2010 - 17:30 #4

Her er hele koden. Der er ikke andet, da jeg alene forsøger at forstå princippet. Jeg er ret sikker på at koden virker i dag som den "skal", bortsat fra at jeg på en eller anden måde skal have slået div'et fra som default.

Har kigget på dine to eksempler og det er samme problemstilling som jeg har, men jeg kan ganske enkelt ikke gennemskue det :-( Jeg har ikke programmeret i 3-4 år og har aldrig rigtig beskæftiget mig med javascript.

Som jeg læser det, tror jeg at jeg mangler noget med en callback funktion, som skjuler divlagene til at starte med. Kan det passe?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

<input type="radio" name="customer_type" class="clickcall" id="customer_type_1">Privat<br />
<input type="radio" name="customer_type" class="clickcall" id="customer_type_2">Erhverv<br />

<div class="hidden">
<div class="contentcall" id="customer_private"><h1>Her kommer privat</h1></div>
<div class="contentcall" id="customer_business"><h1>Her kommer erhverv</h1></div>
</div>

<script>
$('.clickcall').click(function(){
$('.contentcall').hide();
if($(this).attr('id') == "customer_type_1")
$('#customer_private').slideToggle("fast");
if($(this).attr('id') == "customer_type_2")
$('#customer_business').slideToggle("fast");
})
</script>
</body>
</html>

Synes godt om

martiinkolle Nybegynder

12. december 2010 - 18:24 #5

hej :D

Prøv lige at lave mellem mellem if og det der kommer bagefter: if ($ ...

Synes godt om

martiinkolle Nybegynder

12. december 2010 - 20:30 #6

<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<input type="radio" name="customer_type" class="toggle" id="customer_type_1">Privat<br />
<input type="radio" name="customer_type" class="toggle" id="customer_type_2">Erhverv<br />

<p id="erhverv" style="display:none;">Jeg er til den erhvervsdrivende</p>
<p id="privat" style="display:none;">Jeg er til privat</p>
<script>
$(".toggle").click(function () {
if($(this).attr('id') == "customer_type_1"){
$("#erhverv").toggle("slow");
$("#privat").hide("slow");
}

if($(this).attr('id') == "customer_type_2"){
$("#privat").toggle("slow");
$("#erhverv").hide("slow");
}

});
</script>

</body>
</html>

Synes godt om

steenolsen1 Nybegynder

13. december 2010 - 08:23 #7

Ja da, det begynder absolut at ligne noget :-)

Eneste ting jeg mangler at få helt på plads er, at man ikke skal kunne <b>fravælge</b> om man er privat eller erhverv, når man først har taget stilling en gang. Hvis man f.eks. vælger privat, så skal man efterfølgende kun kunne skifte "slidein div" ved at vælge erhverv og modsat. Kan du følge mig?

Tak for hjælpen indtil videre!

Synes godt om

steenolsen1 Nybegynder

13. december 2010 - 09:09 #8

Fandt selv ud af det, da jeg kiggede på det - egentlig lige til og logisk :-)
$("#privat").toggle("slow");
ændredes til
$("#privat").show("slow");

begge steder og så spillede det. Tusind tak for hjælpen!

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS