显示和隐藏div中的内容

Question

有4＆＃34;阅读更多＆＃34;按钮。单击每个按钮可在同一div中显示其内容。单击两次应该隐藏内容。但是单击一个按钮然后单击下一个按钮应该显示第二个按钮的数据。我怎么能这样做？

我尝试使用javascript，检查div中的内容是否为空按钮click.if empty显示数据，如果不是document.getElementById（＆＃34; display_message＆＃34;）。innerHTML =＆＃34;＆＃34 ;;

通知消息：

<input type="button" class="btn btn-default" value="READ MORE" onclick="displayNotificationMessage();">

验证消息

<input type="button" class="btn btn-default" value="READ MORE" onclick="displayVerificationMessage();">

 <div class="container" id="display_message"  >

          </div>

<script>
function displayNotificationMessage()
{

var data="abcde";   


    var msg=document.getElementById("display_message").innerHTML;

     if(msg!="")
     {

     document.getElementById("display_message").innerHTML=""; 
     }
     else
     {


     document.getElementById("display_message").innerHTML=data; 
    }
}


function displayVerificationMessage()
{

var data="bbjkhkjhkjlk";        

    var msg=document.getElementById("display_message").innerHTML;

         if(msg!="")
     {

     document.getElementById("display_message").innerHTML=""; 
     }
     else
     {


     document.getElementById("display_message").innerHTML=data; 
    }

}
</script>

但是点击一个按钮并单击下一个按钮将不会显示内容。 怎么做？

Answer 1

说你有，div与所有文本div＃content。在那个div中，你放置了4个div，带有单独的文本，带有class .sub-content和正确的数据属性。

<div id="content">
 <div class="sub-content" data-id="b1">Some text 1<div>
 <div class="sub-content" data-id="b2">Some text 2<div>
 <div class="sub-content" data-id="b3">Some text 3<div>
 <div class="sub-content" data-id="b4">Some text 4<div>
</div>

和

<button id="b1">Button1<button>
<button id="b2">Button1<button>
<button id="b3">Button1<button>
<button id="b4">Button1<button>

然后就这么简单。

$('button').click( function () {
  if ( $('.sub-content[data-id=' +  $(this).attr("id") + ']').css("display") == "hidden" ) {
    $('.sub-content').hide();
    $('.sub-content[data-id=' +  $(this).attr("id") + ']').show();
  } else {
    $('.sub-content[data-id=' +  $(this).attr("id") + ']').hide();
  }
});