显示隐藏可用内容

您可以使用以下jquery代码：

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

以下是如何通过点击事件隐藏和显示元素的完整演示。

我制作了一个实现相同功能的纯css手风琴。在代码笔上检查以下链接

HTML:

<div class="container">
  <ul>
    <li><a href="#first" class="acc-header">What is java Programming Language?</a>
  <div class="acc-content" id="first">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
    </p>
  </div></li>
    <li><a href="#second" class="acc-header">How is javascript different from java?</a>
  <div class="acc-content" id="second">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
    </p>
  </div></li>
    <li><a href="#third" class="acc-header">Other front end technologies</a>
  <div class="acc-content" id="third">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
    </p>
  </div></li>
  </ul>
</div>

CSS：

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}

使用jQuery可以非常简单。默认情况下，您使用CSS隐藏.contentdiv，并在单击标题时显示相应的div。考虑以下示例。

var $content = $('.content');
$('h2').click(function() {
    $content.removeClass('show')
            .filter('.content-' + $(this).data('content'))
            .addClass('show');
});

.content {
    display: none;
    padding: 5px;
    background: #EEE;
}
.content.show {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>
<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>

如果我理解得很好，我建议在第一次点击时从ajax加载内容，然后隐藏它，而不是删除切换的面板，每次都从ajax中再次检索它（这样就不用等待每次点击，请求也更少）。

所以这里有一种方法：

$('.header').click(function()
{
    var clickedHeader= $(this);
    if (clickedHeader.next().is('.toggle:visible'))
    {
        clickedHeader.next().slideDown(800);
    }
    else if (clickedHeader.next().is('.toggle:hidden'))
    {
        clickedHeader.next().slideUp(800);
    }
    else
    {
        $.get(url, data, function(data)
        {
            // First do some treatment if needed...
            clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
            clickedHeader.next().slideDown(800);
        });
    }
});

如果你有像这样的HTML，这将工作

<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>

在每个标题之后，您将切换一个类为'.toggle'.的div

希望能有所帮助。