JQuery - show/hide isn't working

Question 1

Check this FIDDLE

$(document).ready(function(){
    $(".fleresvar").on('click','.handler',function () {
        var $element = $(this).closest('.fleresvar');
        if ($element.hasClass('open')) 
        {
            $element.removeClass("open");
            $element.find(".txtmore").hide(500);
        } 
        else 
        {
            $(".open").removeClass("open");
            $('.txtmore').hide(500);    
            $element.addClass('open');
            $element.find('.txtmore').show(500);
        }    
    });
});

HTML

<div id="fleresvar" class="fleresvar">  
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>

<div id="fleresvar2" class="fleresvar"> 
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>

Question 2

show/hide script

    var toggle = 0;

$("#fleresvar").click(function (e) {
if (toggle == 0) {
            $('.txtmore').stop(true,true).show('500');
            toggle = 1;
        } else if (toggle == 1) {
            $('.txtmore').stop(true,true).hide('500');
            toggle = 0;
        }
        e.stopPropagation();
        return false;

});

and example

demo

Question 3

Check this fiddle:

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");        

        $element.toggleClass('open');
        $element.children('.txtmore').show(500);
        $('.txtmore').show(500);
    }

});

Question 4

It looks like your code does work, but there is no content inside of the txtask* divs, so there is nothing being displayed. If you add something in them, you will see the toggle in action. However, I have a few suggestions:

The <u> and <b> tags were deprecated in HTML4, then brought back in HTML5 for use with semantic meaning. In other words, these tags should only be used if they add meaning (for example, if your underlining a word that is misspelt). You should use the CSS text-decoration: underline; and font-weight: bold; to achieve the same effect. See here for more info: http://html5doctor.com/u-element/

This line: $element.children(".txtmore").hide(500); can be simplified to: $('#txtmore').hide(500);

This does two things: You don't have to use the children function anymore, so there is less processing. Also, selecting by ID in jQuery is much faster than selecting by class. It won't make a difference for 5 elements, but it will when you get into more complex projects. If the element you need is unique (i.e. there is only one on the whole page) then use an ID.

It looks like you want to toggle the .open class on the main #fleresvar div; if this is the only place, then these two lines are conflicting: $(".open").removeClass("open"); $element.toggleClass('open');

The first line will remove .open from all elements with .open, then the second will add .open to #fleresvar. If you only want to add/remove it from the main element, then either do $element.addClass('open') and $element.removeClass('open'), OR $element.toggleClass('open') twice. I personally like to use addClass and removeClass, so that I know for sure that the class was added/removed.

For the txtask* divs: instead of putting the same inline styles on each one, add a common class to them, then move the styles to your CSS file.

Here is the jsFiddle with my recommended changes: http://jsfiddle.net/2Saph/9/

HTML:

<div id="fleresvar" class="fleresvar">Klik her for at se flere svar
    <div id="txtmore" class="txtmore">
        <div id="txtask1" class='txtask'>a</div>
        <div id="txtask2" class='txtask'>b</div>
        <div id="txtask3" class='txtask'>c</div>
        <div id="txtask4" class='txtask'>d</div>
        <div id="txtask5" class='txtask'>e</div>
    </div>
</div>

JS:

$("#fleresvar").on('click', function (evt) {
    evt.preventDefault();
    var $element = $(this);
    if ($element.hasClass('open')) {
        $element.removeClass("open");
        $('#txtmore').hide(500);
    } else {
        $element.addClass("open");
        $('#txtmore').show(500);
    }
});

CSS:

#fleresvar {
    cursor:pointer;
    background-position: 0 4px;
    min-height: 15px;
    border: 0 solid #000000;
    margin: 2px 0 5px 0;
    padding: 0 0 0 15px;
    background-image:url('/images/images/Pil_normal.png');
    background-repeat: no-repeat;
    font-weight: bold;
    text-decoration: underline;
}
#fleresvar.open {
    background-image: url('/images/images/Pil_open.png');
}
#txtmore {
    display: none;
    width: 280px;
    min-height:15px;
    border: 0 solid #000000;
    margin: 0;
}
div.txtask {
    text-decoration:underline;
    color:#8F8F8F;
    cursor:pointer;
}

JQuery - show/hide isn't working

HTML

JavaScript