Conflict between some javascript and jQuery on the same page

Question

I am using a JavaScript function and some jQuery to do two things on a page. The first is a simple JS function to hide / show the div and change the active state of the tab:

This is JS that shows / hides the div and changes the active state on some tabs:

var ids=new Array('section1','section2','section3');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

html:

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>

<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>

Now the problem is ....

I added a jQuery image gallery called galleria to one of the tabs. The gallery works great when it is in a div that is intuitively configured to display: block. However, when it is in one of the divs that is set to display: none; part of the gallery does not work when the div switches to visibility. In particular, the following css stops writing (this is created by galleria jQuery):

element.style  {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}

, , div : none. ( Javascript), ? , , : block; .

? , - jQuery... , , , ?

!

Answer 1

jQuery, javascript :

$(function() {

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

, display:none. javascript , .

- :

$(function() {

$('#section2, #section3').hide();
$('#section2 .images').galleria();

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

html :

<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>

<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>

javascript:

$(function() {

$('#section2 .images').galleria();
$('#section2, #section3').hide();

var sections = $('.section');
$('.sectionlinks a').click(function(e){
    e.preventDefault();
    sections.hide();
    $($(this).attr('href')).show();
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');
});

});

: http://jsfiddle.net/cdaRu/2/

Answer 2

, , div , . .

Answer 3

, Javascript jQuery. ... .

Answer 4

It's just “off the cuff”, but perhaps the side model is incomplete: “The element does not generate any window at all” with display: none;

Maybe changing it to "block" and installing visibility: hidden;would be better?