Toggleボタンを押して、facebookのコメントボックスの表示/非表示を切り替えます。

Question

トグルボタンを作りたいと思います。私はデータベースからデータを取って、それぞれの告白（ブログに似たコンテナ）はFacebookのコメントボックスを持っています。私は、Facebookのコメントボックスを隠すか隠すかのボタンを作っていますが、うまくいきません。私は自分のウェブページのスクリーンショットを添付しています。

<?php 
$id="0"; 
$sql="SELECT * FROM user_confession"; 
require 'connection.php'; 
$result = mysqli_query($conn, $sql); 
    if (mysqli_num_rows($result)>0) 
    { 


            while($row = mysqli_fetch_array($result)) 
            { 
             $date= $row['date1']; 
             $confession= $row['confession']; 
             $userid=$row['id']; 


echo"<div style='border: 2px solid black;width: 85%;margin-left:55px;overflow: hidden;margin-top: 10px; '> 
</div>"; 

echo"<div id='confession_container'>"; 
     echo"<div id='date'>"; 
      echo $date; 
     echo"</div>"; 

    echo"<div id='confession_content'> 
     #confession no'"; echo $id=$id+1;echo" 

     <p style='margin-bottom: 10px;'>";echo $confession; echo"</p>"; 
     $id='confession'.$userid; 

     echo" <button onclick='myFunction('confession20')'>Comment</button>"; 

     echo"<div id='confession20' class='fb-comments' data-href='https://developers.facebook.com/docs/plugins/comments#configurator1' data-numposts='5'></div> 


    </div> 
</div>"; 
} 
} 
?> 




<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11&appId=1554032561304520'; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script>  

<script type="text/javascript"> 

function myFunction(p1) 
{ 
    console.log(p1); 
    var x = document.getElementById(p1); 
    if (x.style.display === "none") 
    { 
     x.style.display = "block"; 
    } 
    else { 
     x.style.display = "none"; 
    } 
} 

</script> 

Answer 1

#showHideCommentBoxはボタン

Answer 2

実施例である** #myCommentBoxDivが を非表示にしたり表示するdiv要素であるこの

<script> 
 
    $(function() { 
 
     $("#showHideCommentBox").click(function (e) { 
 
      e.preventDefault(); 
 
      var divToHideOrShow = $("#myCommentBoxDiv") 
 
      if (divToHideOrShow.css("display") == "none") { 
 
       divToHideOrShow.show(); 
 
      } 
 
      else { 
 
       divToHideOrShow.hide(); 
 
      } 
 
     }); 
 
    }); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="showHideCommentBox">Mostrar/Ocultar</button>

をお試しくださいあなたのケースjsfiddle。

実際にあなたのケースで何が起こっているのか、あなたのfb-root div要素は、あなたがそれは、それはそう、あなたの場合の条件は、それが常に起こっているそのようにマッチしていない空を返してx.style.displayプロパティの取得しようとしているときのスタイルプロパティはそう割り当てられていませんブロックされます。だから私はdivタグにstyle="display:none;"プロパティを割り当てて、今働いています。

最初の方法

HTML

<button id="btnToggle">Toggle Hidw Show</button> 
<div id="fb-root" style="display:none;"> 
    <h2>Zebra</h2> 
    <p>Here is a paragraph about zebras.</p> 
</div> 

javascriptのコード

document.getElementById("btnToggle").onclick = function() { 
    myFunction('fb-root'); 
} 


function myFunction(p1) 
{ 
    console.log(p1); 
    var x = document.getElementById(p1); 
    if (x.style.display === "none") 
    { 
     x.style.display = "block"; 
    } 
    else { 
     x.style.display = "none"; 
    } 
} 

第二の方法

HTML

<button id="btnToggle">Toggle Hidw Show</button> 
<div id="fb-root"> 
    <h2>Zebra</h2> 
    <p>Here is a paragraph about zebras.</p> 
</div> 

javascriptのコード

document.getElementById("btnToggle").onclick = function() { 
    myFunction('fb-root'); 
} 


function myFunction(p1) 
{ 
    console.log(p1); 
    var x = document.getElementById(p1); 
    if (x.style.display === "none" || x.style.display === "") 
    { 
     x.style.display = "block"; 
    } 
    else { 
     x.style.display = "none"; 
    } 
}