CODEWITHSUNDEEP
javascriptjquery
Matei Panchios
Matei Panchios

Reputation: 333

Show/hide and slider conflict

A few days ago I asked a question regarding a show/hide div script that I had problems with.

JS show/hide default behavior

Tested all the solutions and nothing seemed to work on my website (they all work in fiddles or different areas of the website than the one I need it in). The problem is that inside the show/hide divs I have a slider. There are 4 tabs, each showing a different slider. My best guess is that the problem appears because both the slider and the show/hide use the same display:none, altering the slider's content.

Here's the JS that I currently have for the show/hide:

window.addEventListener("hashchange", function () {
    var targetDiv = $(location.hash);
    if (!targetDiv.is(':visible')) {
        $('.page1').slideUp();
        targetDiv.slideDown();
    } else {
        $('.page1').slideUp();
    }
}, false);

The slider I use is called Flickity and it's link is; https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js

The link of the live website is: http://theworkshop.ro/astra3/

Here's the fiddle of the show/hide: http://jsfiddle.net/s9cxjrmf/ (currently the .page css is commented to show all 4 show sliders, if I add display none as it is in the fiddle it doesn't work anymore, it only shows the arrows of the slider, not it's content)

The problem is in the Work section of the website.

I'm struggling for a few days, any idea how to solve this problem?

Upvotes: 1

Views: 2481

Answers (1)

Ashish Ranade
Ashish Ranade

Reputation: 605

Try with this code it will hide all the div inside the #work_box and again displays the first one that way the script running for hiding and showing the div will work hope this will help you.

  $( document ).ready(function() {
        $( "#work_box div" ).each(function() {
           $( this ).css( "display", "none" );
        });

        $( "#work_box div" ).first().css( "display", "block" );

        $('#work_box div').first().find(':hidden').each(function(){
           $(this).show();
        });
    });

This is working for the first div you need to repeat this.

$('#work_box div').first().find(':hidden').each(function(){
    $(this).show();
});

for other div when user click on the other links like films,tv_shows etc.

Upvotes: 1

Related Questions