windowのサイズによって表示の切り替え（jQuery）

Question

windowサイズが小さかったら<h3>を画像に切り替え
更にその下の<ul>を非表示→<h3>をクリックすると表示させたいのですが
動きません・・・。

まだ初心者なもので初歩的な所が間違っていると思うのですが
どなたか助けてください( ﾉД`)

#pdcaは、各#P,#D,#C,#Aが入っているdivです。

var windowWidth = $(window).width();
var windowSm = 767;
$(function(){
if (windowWidth <= windowSm) {
$(function(){
$("#P h3").html('<h3><img src="images/p_sp.png"></h3>');
$("#D h3").html('<h3><img src="images/d_sp.png"></h3>');
$("#C h3").html('<h3><img src="images/c_sp.png"></h3>');
$("#A h3").html('<h3><img src="images/a_sp.png"></h3>');
$('#pdca h3').click(function(){
$(this).next().slideToggle();
});
});
}

}
});

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

Could not create SImpleDOM structure mostly cause of malformed HTML

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

また「windowサイズが小さかったら」というのは個人により感覚が違います。具体的に記載されたほうが良いです（コード内にある情報であっても何のためにあるのか記載されたほうが良いです）

[reosablo]

Google ChromeおよびInternet Explorer 11で試してみましたがエラーメッセージは出ず、(最後の"}"が1個多いこと以外は)問題なく動作しました。HTMLコードとエラーメッセージが出たブラウザの追記が必要かと思います。動作を試したコード → https://codepen.io/anon/pen/MBdgmN

[x_x]

このような情報がありましたが、Dreamweaverを使っているのでしょうか？ https://forums.adobe.com/thread/1662669

Answer 1

$(function(){
    if (windowWidth <= windowSm) {
        //$(function(){ 不要
        // html()ではなくreplaceWith()を使う
        $("#P h3").replaceWith('<h3><img src="images/p_sp.png"></h3>');
        $("#D h3").replaceWith('<h3><img src="images/d_sp.png"></h3>');
        $("#C h3").replaceWith('<h3><img src="images/c_sp.png"></h3>');
        $("#A h3").replaceWith('<h3><img src="images/a_sp.png"></h3>');
        $('#pdca h3').click(function(){
            $(this).next().slideToggle();
        }).next().hide(); // 非表示
        //}); 不要
    }
//} 不要
});