CODEWITHSUNDEEP
jquerytoggle
alex
alex

Reputation: 4914

jquery toggle() doesn't seem to work in chrome / safari

I am having difficulties with toggle() in chrome / safari. I played around with noconflict() without any luck. In chrome and safari the first recipe translation pops under the german one. Now the other 2 recipes work like i expected. How can i fix this for chrome and safari??

//$.noConflict();

 $(window).load(function() { 

  $('#recipes').orbit({
    timer: false,  
    bullets: true,
    captions: true,     
    afterSlideChange: textSlides
  });

    $("a.lang").click(function (e) {
        var contentSpan = $(this).parent().attr('class');
        e.preventDefault();
        $("span."+contentSpan).toggle();
    });
  });

  function textSlides() {   
    var theId = "#d" + $(this).attr('id');
    $(theId).toggle().siblings().hide();
  }

and my html is

<div id="recipes-text">
<div id="dr1">
  <span class="language_content_dr1" >
    <h3>WORTEL CHUTNEY</h3>
    <p><strong>ingrediënten</strong><br />
    asdfasd german</p>
    <a class="lang" href="#">English</a>
    </span>    
  <span  class="language_content_dr1" style="display:none;">
  <h3>CARROT CHUTNEY</h3>
    <p>recipe<br />
    english </p>
    <a class="lang" id="de" href="#de_tri">german</a>
    </span>

</div>
<div id="dr2" style="display:none;">
    <span class="language_content_dr2">
    section 222 jawohl<br />

    <a class="lang" href="#">English</a><br />
    </span>
    <span class="language_content_dr2" style="display:none;">

    section 222 english <br />

    <a class="lang" id="de" href="#de_tri">german</a>
    </span>
</div>
<div id="dr3" style="display:none;">
    <span class="language_content_dr3">
    ection 333 jawohl<br />

    <a class="lang" href="#">English</a>
    </span>

    <span class="language_content_dr3" style="display:none;">
    section 333 english<br />
    <h3>CARROT CHUTNEY</h3>
    <p>recipe<br />
    english
    </p>
<a class="lang" id="de" href="#de_tri">German</a>
    </span>
</div>
</div>

Upvotes: 1

Views: 4352

Answers (1)

jk.
jk.

Reputation: 14435

Change your spans to divs.

<span class="language_content_dr1" >


<div class="language_content_dr1" >

And this line:

$("a.lang").click(function (e) {
    e.preventDefault();
    var contentSpan = $(this).parent().attr('class');
    $("div."+contentSpan).toggle();
});

Upvotes: 3

Related Questions