jQuery toggleで幅いっぱいまで開かない

はじめまして。普段はコーディングを全くしない、グラフィックデザイナーです。
ポートフォリオサイトコーディング中に、
つまいづてしまったので御教授ください。

###発生している問題・エラーメッセージ

画像・文字部分をクリックすると、
スライドトグルで、下にflexsliderが表示されるように組みました。
4つ実装したいので、
<script></script>4つ連続して書いてあります。（簡略化とかはわかりません。）
ですが、トグルをクリックしても設定幅の5%ほどしか表示されず、
スライドの画像が見えません。
一度開いた状態で、タブを切り替えるなどして、サイトに戻ると
表示されています。
単純に重いのでしょうか？
slidetoggleはナビゲーション用で、
flexsliderの表示には向いてない場合、
どのように表示非表示を設定するのが良いか代替案も
お教えいただきたいです。

###該当のソースコード

 	  $(function(){
	    $('#DrawingBtn').on('click', function() {
	        $('#DrawingBody').slideToggle(300);		
 	   });
	  });
	</script>

~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~


        <ul class="category" id="DrawingBtn">
          <li class="category-image"><img src="images/category-01.png" width="220" height="270"></li>
    	  <li class="category-word"><h2>Drawing</h2><br>Perfume 2016.</li>
        </ul>

        <div class="flexslider" id="DrawingBody">
          <ul class="slides">
            <li><img src="images/slide-IL-01.jpg"></li>
            <li><img src="images/slide-IL-02.jpg"></li>
            <li><img src="images/slide-IL-03.jpg"></li>
            <li><img src="images/slide-IL-04.jpg"></li>
            <li><img src="images/slide-IL-05.jpg"></li>
            <li><img src="images/slide-IL-06.jpg"></li>
            <li><img src="images/slide-IL-07.jpg"></li>
          </ul>
	 </div>

これが４つです。

画像を軽くしてみましたが、変化ありませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報