jQuery show delete display attr

Question

I'm using jQuery hide and show function but I have a problem with the show one.

My javascript code is:

function toggle_visibility(idContent, idLien, question) {
    var c = document.getElementById(idContent);
    var l = document.getElementById(idLien);
    var q = question;
    if(c.style.display == 'block') {
        $("#" + idContent).hide("blind") ;
        l.innerHTML = '<h4><i class=\"icone-rouge icon-right-open-big\"></i>'+ q +'</h4>' ;
    }
    else {
        $("#" + idContent).show("blind") ;
        l.innerHTML = '<h4><i class=\"icone-rouge icon-down-open-big\"></i>'+ q +'</h4>' ;
    }
}

The problem is that it doesn't work for the hide part when the div is hidden at the load of the page (with display='none'). I can display the block but then I cannot hide it.

I noticed that when I show a content, jQuery delete the display attr in my html style... Maybe there is a link.

Here a link for example : http://jsfiddle.net/29c4D/2/

Thank you.

Answer 1

DescampsAu, since you are using jQuery I rewrote your code to take full advantage of the powerful library. You can see the example in this fiddle.

Let jQuery do the heavy lifting of checking whether an element is hidden or not by making use of either the .toggle() or .slideToggle() methods.

Remove all of the onClick() code within your spans and use this jQuery instead:

jQuery

$(document).ready( function() {
    //After the page has loaded, let jQuery know where all of the spans are.
    var toggleThis = $(".toggleMe");

    //Whenever you click one of the spans do this function.
    toggleThis.click( function() {
        //Register the span you clicked and the next div that holds the hidden stuffs.
        var el = $(this),
            nextDiv = el.next(".toggleMeDiv");

        //Check if the span's partner div is hidden or showing by checking its css "display" value.
        if(nextDiv.css("display") == "block") {
            //Change the text of the span to be its title attribute plus whether its partner is showing or hidden.
            el.html(el.attr("title")+" hidden");
        } else {
            el.text(el.attr("title")+" shown");
        }

        //Let jQuery toggle the partner's visibility.
        nextDiv.slideToggle();
    });
});

HTML

<span class="toggleMe" title="Quest 1">Quest 1</span>
<div class="toggleMeDiv">Boubou1</div>

<span class="toggleMe" title="Quest 2">Quest 2</span>
<div class="toggleMeDiv">Boubou2</div>

Answer 2

Making this too hard on yourself.

HTML

<span class="toggle" id="lien1" data-original-text="Quest 1">Quest 1</span>
<div id="content1">Boubou1</div>

<span class="toggle" id="lien2" data-original-text="Quest 1">Quest 2</span>
<div  id="content2">Boubou2</div>

JS

$(document).ready( function () {

    $('.toggle').on('click', function() {
        $(this).next('div').toggle('blind', textToggle); // or slideToggle();
    });


    function textToggle() {
        var $target = $(this).prev('span'); // "this" is the div that was toggled.
        var originalText = $target.attr('data-original-text');

        if ( $(this).is(':visible') ) {
            $target.text(  originalText + ' open' );    
        } else {
            $target.text( originalText + ' closed' );
        }   
    }
});

A fiddle: http://jsfiddle.net/29c4D/7/

EDIT to include label + effect.