CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Dave Smith
Dave Smith

Reputation: 13

Jquery .toggle replacement code

I have (had) a button on my website that switched between a wide and narrow layout for articles. Since JQuery 1.9, this hasn't worked because of the deprecation of toggle. I'm no great whizz at JS, and haven't managed to cobble together an answer from the various questions on here, so would like someone to look at my specific case if possible. I appreciate that for someone more competent this is probably very obvious, but I'm still learning!

The site is here, e.g:

http://www.davidsmith.name/2011/09/04/Real-surreal-and-hyperreal-in-crash-and-the-beach/

Applicable part of code as follows: 

<span><a id="switch" href="#" title="switch the menu"><span id="blogview">Switch to Article View</span>
 <span id="articleview" class="hide">Switch to Blog View</span></a></span><br/>
 <span id="readability" class="hide"><span class="rdbWrapper" data-show-read="1" data-show-send-to-kindle="1" data-show-print="1" data-show-email="0" data-orientation="0" data-version="1" data-bg-color="transparent"></span><script type="text/javascript">(function() {var s = document.getElementsByTagName("script")[0],rdb = document.createElement("script"); rdb.type = "text/javascript"; rdb.async = true; rdb.src = document.location.protocol + "//www.readability.com/embed.js"; s.parentNode.insertBefore(rdb, s); })();</script></span>

<script type="text/javascript">
            $('a#switch').(function () {
            $('div#right').hide('slide', { direction: 'right' }, 300);
            $('div#left').delay(300).animate({width: 950}, 600);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
            }, function () {
            $('div#right').delay(500).show('slide', { direction: 'right' }, 500);
            $('div#left').animate({width: 430}, 500);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');}
            );
</script><br />

Upvotes: 0

Views: 5525

Answers (1)

mplungjan
mplungjan

Reputation: 177885

See my answer here

which would translate to 

$(function() {                      
   $('a#switch').on("click",function(e) {
      e.preventDefault();
      if ($(this).data("show")=="no") {
            $('div#right').hide('slide', { direction: 'right' }, 300);
            $('div#left').delay(300).animate({width: 950}, 600);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
        $(this).data("show","yes");
      }   
      else {
            $('div#right').delay(500).show('slide', { direction: 'right' }, 500);
            $('div#left').animate({width: 430}, 500);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
        $(this).data("show","no");     
      }
  });
});

Upvotes: 2

Related Questions