jQuery method slideToggle() and resize() not working well -

jQuery method slideToggle() and resize() not working well -

i have created table div-s in desktop mode (>767px) , accordions scheme on mobile mode (<768px). used (document).ready 2 if-s , (window).resize same if-s, in way if user changes width of browser view changes automatically.

everything working good, when alter first time desktop mode mobile mode accordions scheme little messy. doing wrong?

full demo

js code:

function accordion() { if (jquery(window).width() < 768) { $('.content_1').hide(); $('.child_1_1').hide(); $('.child_1_2').hide(); $('.child_1_3').hide(); $('.parent_1 .title').click(function() { $('.content_1').slidetoggle("fast"); $('.child_1_1').slidetoggle("fast"); $('.child_1_2').slidetoggle("fast"); $('.child_1_3').slidetoggle("fast"); }); $('.content_1_1').hide(); $('.child_1_1 .title').click(function() { $('.content_1_1').slidetoggle("fast"); }); $('.content_1_2').hide(); $('.child_1_2 .title').click(function() { $('.content_1_2').slidetoggle("fast"); }); $('.content_1_3').hide(); $('.child_1_3 .title').click(function() { $('.content_1_3').slidetoggle("fast"); }); } else if (jquery(window).width() > 767) { $('.content_1').show(); $('.child_1_1').show(); $('.child_1_2').show(); $('.child_1_3').show(); $('.content_1_1').show(); $('.content_1_2').show(); $('.content_1_3').show(); $('.parent_1 .title').off(); $('.child_1_1 .title').off(); $('.child_1_2 .title').off(); $('.child_1_3 .title').off(); $('.front').hide(); } } $(document).ready(function() { accordion(); }); $( window ).resize(function() { accordion(); });

i have updated code create work on resize http://jsfiddle.net/mfucv9vm/16/

function accordion() { if (jquery(window).width() < 768) { $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').hide(); } else if (jquery(window).width() > 767) { $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').show(); $('.front').hide(); } } $(document).ready(function () { accordion(); $('.parent_1 .title').on('click', function () { if (jquery(window).width() < 767) { $('.content_1').stop().slidetoggle("fast"); $('.child_1_1').stop().slidetoggle("fast"); $('.child_1_2').stop().slidetoggle("fast"); $('.child_1_3').stop().slidetoggle("fast"); } }); $('.child_1_1 .title').on('click', function () { if (jquery(window).width() < 767) { $('.content_1_1').stop().slidetoggle("fast"); } }); $('.child_1_2 .title').on('click', function () { if (jquery(window).width() < 767) { $('.content_1_2').stop().slidetoggle("fast"); } }); $('.child_1_3 .title').on('click', function () { if (jquery(window).width() < 767) { $('.content_1_3').stop().slidetoggle("fast"); } }); }); $(window).resize(function () { $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').hide(); accordion(); });

jquery