Modifiera Javascript

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.

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

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);
    };
}();

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.

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.

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

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

$(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 ;)

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

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

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>

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

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

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

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