---
title: "Modifiera Javascript"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/177282-modifiera-javascript"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Ewik"
published: "2009-03-04T09:48:40.000Z"
updated: "2009-03-04T14:56:15.000Z"
replies: 13
views: 545
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/177282-modifiera-javascript"
---

# Modifiera Javascript

## #1 — Ewik, 2009-03-04T09:48Z

Jag har ett javascript som gör nästan som jag vill. Eftersom jag inte kan något om javascript (än) så kanske någon skulle kunna hjälpa?

[En testsida finns här.](http://ewik.se/test/)

När man klickat på en rubrik i listan så visas en text till höger, precis som jag vill, men om man klickar en andra gång vill jag att texten till höger försvinner bort igen. Tror inte att det borde vara så mycket jobb.

Sen har jag ett litet problem till. Det verkar inte fungera alls i IE, det vore bra om det gjorde det. :)

Permalänk: https://www.webforum.nu/p/177282

## #2 — voigtann1, 2009-03-04T09:52Z

Du kör med addEventListener för att sätta ett event på elementen, attachEvent heter det för IE, om jag kan komma med förslag så hade jag försökt mig på JQuery istället (eller annat ramverk) det hade blivit så mycket enklare ;)

Men din js kod kan vara:

```
var sectionCollapse = function(){
    // start configuration - edit here 
    var config = {
        JSavailableClass:'js',
        showClass:'show',
        tocID:'toc'
    }
    // end configuration
    document.body.className = (document.body.className +' '||'') + config.JSavailableClass;
    var toc = document.getElementById(config.tocID);
    if(toc){
        var current = {};
        function toggle(e){
            var t = e.target;
            if(t.nodeName.toLowerCase() === 'a'){
                var sectionID = t.getAttribute('href').split('#')[1];
                var section = document.getElementById(sectionID);
                if(current.section){
                    current.section.className = '';
                }
                if(section){
                    section.parentNode.className = (current.section==section.parentNode?'':config.showClass);
                    current.section = section.parentNode;
                };
            };
        };
        toc.addEventListener('click',toggle,false);
    };
}();
```

Permalänk: https://www.webforum.nu/p/2174046

## #3 — Ewik, 2009-03-04T10:29Z

Ok, jag har kollat lite, även tidigare, på jQuery och tror jag kan vara något på spåren där. Jag ska experimentera vidare lite grann. Återkommer.

Permalänk: https://www.webforum.nu/p/2174048

## #4 — Ewik, 2009-03-04T13:29Z

Nu har jag kollat lite på jQuery och insett att jag kan alldeles för lite Javascript. Har hittat ett exempel på hur man kan göra visa/dölj. Men grejen är att jag gärna vill ha kvar HTML som den är nu. Alltså den HTML som är på testsidan.

Permalänk: https://www.webforum.nu/p/2174060

## #5 — voigtann1, 2009-03-04T13:35Z

Måste säga det bli fruktansvärt jobbigt eftersom det är jätte svårt att få ut divarna att döljas, hade varit betydligt enklare om det hade varit en wrapper runt dom, men:

```
    <script type="text/javascript">
		$(function(){
			$("div").hide();
			$("body").addClass("js");
			$("#toc a").click(function(e){
				var t = $(this).attr("href");
				$(t).parent().parent().find("div").hide();
                if($(t).parent().hasClass("show"))
                {
                    $(t).parent().removeClass('show');
                    $(t).parent().hide();
                }
                else
                {
                    $(t).parent().addClass('show');
                    $(t).parent().show();
                }
		    });
        });
    </script>
```

fungerade med HTML koden du har gett. men CSS delen så har inte body klassen JS vilket ställer till "problem" kanske.

red. la in JS för att lägga in JS cssklassen  till body-elementet

Permalänk: https://www.webforum.nu/p/2174061

## #6 — oskars, 2009-03-04T13:50Z

Flikar in med en sak... Vad betyder det när raderna inleds med ett $-tecken?

Permalänk: https://www.webforum.nu/p/2174062

## #7 — voigtann1, 2009-03-04T13:54Z

$(function() {}); är samma sak som (JQuery här):

```
 $(document).ready(function(){
   // Your code here
 });
```

dvs dom.ready

kortade ner koden lite (gå säkert ännu mer):

```
$(function(){
	$("div").hide();
	$("body").addClass("js");
	$("#toc a").click(function(){
	    var that = this;
	    $("#toc a").each(function()
	    {
	        var id = $(this).attr("href");
	        if(this == that) { $(id).parent().toggle().addClass('show'); }
	        else { $(id).parent().hide().removeClass('show');}
	    });
    });
});
```

... men orkar inte mer ;)

Permalänk: https://www.webforum.nu/p/2174063

## #8 — Ewik, 2009-03-04T14:07Z

Tack så mycket för hjälpen voigtann1. Nu verkar det fungera riktigt bra!

Permalänk: https://www.webforum.nu/p/2174064

## #9 — voigtann1, 2009-03-04T14:12Z

Vill bara varna dig: du får aldrig har några andra div:ar i din kod, dom kommer alltid att bli dolda.

Permalänk: https://www.webforum.nu/p/2174065

## #10 — Ewik, 2009-03-04T14:31Z

OK, men om man lägger in en wrapper runt div:arna

```
<ul id="toc">
  <li><a href="#rubrik1">Rubrik 1</a></li>
  <li><a href="#rubrik2">Rubrik 2</a></li>
  <li><a href="#rubrik3">Rubrik 3</a></li>
</ul>
<div id="wrap">
  <div>
    <h2 id="rubrik1">Rubrik 1</h2>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <h2 id="rubrik2">Rubrik 2</h2>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <h2 id="rubrik3">rubrik 3</h2>
    <p>Lorem ipsum...</p>
  </div>
</div>
```

Permalänk: https://www.webforum.nu/p/2174066

## #11 — voigtann1, 2009-03-04T14:37Z

$("div").hide(); =\> $("#wrap div").hide();

Permalänk: https://www.webforum.nu/p/2174067

## #12 — Ewik, 2009-03-04T14:44Z

Så tyckte jag också att det skulle vara men efter att ha ändrat det får jag inte fram nånting. Dom dolda divarna visas inte. 

[Se här](http://ewik.se/test/index2.html)

Permalänk: https://www.webforum.nu/p/2174068

## #13 — voigtann1, 2009-03-04T14:49Z

Det är din CSS som är problemet. fixa din CSS.

Permalänk: https://www.webforum.nu/p/2174069

## #14 — Ewik, 2009-03-04T14:56Z

Oj, jag missade det. Tack för all hjälp..

Permalänk: https://www.webforum.nu/p/2174070

---

Tråden på webben: https://www.webforum.nu/amne/javascript/177282-modifiera-javascript