slidetoggleで作ったアコーディオンがメディアクエリで崩れる

3つのアコーディオンボックスを作り、
狭い画面幅では縦並び、広い画面では横並びになる
レスポンシブデザインを作成中です。

アコーディオンは
ヘッダー部とコンテンツ部に分かれており、
ヘッダー部をクリックするとコンテンツ部が開閉する仕組みになっています。

広い画面で横並びにした際にはアコーディオンを無効にしたいため
acHeaderをCSSのメディアクエリで非表示にしています。

ここで問題が発生しました。

画面を開いて、そのままウインドウ幅を拡大縮小する分には
思い通りの動作になるのですが、

１．狭い画面でアコーディオンを開いて画面を広げると横並びが崩れる
２．狭い画面でアコーディオンを開いてから閉じて、そのあと画面を広げると該当のボックスが非表示になる。

どうもslidetoggleが動作した後のdisplay:blockやdisplay:noneが
メディアクエリで指定しているdisplay:inline-blockを上書き（？）されている感じです。

なるべくシンプルなスクリプトで作りたかったので、このような形にしたのですが
どこを修正すれば問題が解決するかわかりません。

ヒントをいただけますと幸いです。

最小限のコードを下記に載せておきます。
よろしくお願いいたします。

<head>
<meta charset="utf-8">
<style>
div {
	border:2px solid red;
	max-width:600px;
	padding:50px;	
}
.acContent {
display:none;
}
@media(min-width:601px){
	.acHeader {display:none;}
	.acContent{display:inline-block;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
  $(function() {
    $('.acHeader').click(function(e){
      $('+.acContent', this).slideToggle(500);
    })
  });
</script>
</head>
<body>
<div class="acHeader">
ヘッダー
</div>
<div class="acContent">
コンテンツ
</div>

<div class="acHeader">
ヘッダー2
</div>
<div class="acContent">
コンテンツ2
</div>

<div class="acHeader">
ヘッダー3
</div>
<div class="acContent">
コンテンツ3
</div>
</body>

行動規範の内容に同意します

回答1件

ベストアンサー

slideToggleを行うと、「overflow: hidden; display: none;」などのstyleがタグの方についてしまい、そちらを優先的にみてしまいます。
開く、閉じるなどの動作させた後でもPCの表示が固定であれば、「!important」を使用して、PCでは常にinline-blockにするのがいいと思います。
「overflow: hidden」がついてしまうので、overflow解除の指定も必要なようです。

css
1@media(min-width:601px){
2	.acHeader {
3		display:none;
4	}
5	.acContent{
6		display:inline-block !important;
7		overflow: auto !important;
8	}
9}