Twitter bootstrap 3 如何使用bootstrap3在div中显示不同的文本？

所以我有一个页面有5张不同的照片。单击每张照片时，下面的div将显示相应的文本，然后再次单击照片时，文本将隐藏。我只是一个javascript初学者，但我想实现的是，根据用户单击的照片显示不同的文本

现在，当你点击一张照片时，文本会显示出来。但是当你点击另一张照片时，新的文字会显示在正下方。我要问的是，如何修改jquery代码，以便在单击照片时显示文本，但在单击另一张照片时，旧文本将隐藏，新文本将显示。我正在使用Bootstrap的所有jQuery“折叠”功能

提前谢谢

我这里有一个问题：

此外，如果可能，我将如何显示文本附带的照片？比如哪张照片是活动的？就像一个简单的文本颜色变化

以下是HTML代码：

<div class="col-md-3"></div>
    <div class="col-md-9">
        <div class="team-bio">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <div data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed" aria-expanded="false">
                <img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;" contenteditable="false">
                 <h4 class="">Name 1</h4>

            </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <div data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
                <img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
                 <h4 class="">Name 2</h4>

            </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
             <h4 class="">Name 3</h4>

        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
             <h4 class="">Name 4</h4>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
            <img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
             <h4 class="">Name 5</h4>

        </div>
    </div>
    <div id="collapseOne" class="col-md-12 panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <!-- div to hide-->
        <p class="">This is for Person 1.</p>
    </div>
    <!--div to hide-->
    <div id="collapseTwo" class="panel-collapse collapse col-md-12">
        <!-- div to hide-->
        <p class="">This is for Person 2.</p>
    </div>
    <!--div to hide-->
</div>

---

为了使引导式手风琴能够正常工作，可折叠元件需要安装在面板中。然后，您需要覆盖任何不需要的面板样式

为了突出显示选定的图像，可以将“折叠”类添加到切换折叠的元素中。然后应用一些CSS规则，根据此类的存在对这些元素进行格式化。每当单击某个项时，引导程序都会从该元素中移除折叠的类，并将其添加到面板组中的其他类中

HTML:

---

Bootply here:

请将代码也添加到您的问题中。从帮助中心：如果可以创建一个问题的实例，您可以链接到（例如，在sqlfiddle.com或jsbin.com上），那么就这样做，但也可以在问题本身中包含代码。不是每个人都可以访问外部网站，而且链接可能会随着时间的推移而中断。谢谢，这是有效的，但是如果我在它下面有另一个部分（另一个面板）会怎么样？比如说，有人点击了最上面一行，div显示出来，然后他们点击了最下面一行，然后旧的div消失了，然后最下面的div出现在最下面的部分。我不确定你的意思。你能再具体一点吗？例如：“如果我有另一个部分（另一个面板）在它的正下方会怎么样？”-什么是“它”？也许，可以使用元素ID或类。对此我很抱歉。实际上，我只是将我的两个部分放在一个面板中，以便这两个部分能够显示和隐藏内容。非常感谢。

var Collapse = function (element, options) {
this.$element      = $(element)
this.options       = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger      = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null

if (this.options.parent) {
  this.$parent = this.getParent()
} else {
  this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}

if (this.options.toggle) this.toggle()
}

Collapse.VERSION  = '3.3.0'

Collapse.TRANSITION_DURATION = 350

Collapse.DEFAULTS = {
toggle: true,
trigger: '[data-toggle="collapse"]'
}

Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}

Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return

var activesData
var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')

if (actives && actives.length) {
  activesData = actives.data('bs.collapse')
  if (activesData && activesData.transitioning) return
}

var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return

if (actives && actives.length) {
  Plugin.call(actives, 'hide')
  activesData || actives.data('bs.collapse', null)
}

var dimension = this.dimension()

this.$element
  .removeClass('collapse')
  .addClass('collapsing')[dimension](0)
  .attr('aria-expanded', true)

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)

this.transitioning = 1

var complete = function () {
  this.$element
    .removeClass('collapsing')
    .addClass('collapse in')[dimension]('')
  this.transitioning = 0
  this.$element
    .trigger('shown.bs.collapse')
}

if (!$.support.transition) return complete.call(this)

var scrollSize = $.camelCase(['scroll', dimension].join('-'))

this.$element
  .one('bsTransitionEnd', $.proxy(complete, this))
  .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}

Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return

var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return

var dimension = this.dimension()

this.$element[dimension](this.$element[dimension]())[0].offsetHeight

this.$element
  .addClass('collapsing')
  .removeClass('collapse in')
  .attr('aria-expanded', false)

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)

this.transitioning = 1

var complete = function () {
  this.transitioning = 0
  this.$element
    .removeClass('collapsing')
    .addClass('collapse')
    .trigger('hidden.bs.collapse')
}

if (!$.support.transition) return complete.call(this)

this.$element
  [dimension](0)
  .one('bsTransitionEnd', $.proxy(complete, this))
  .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}

Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}

Collapse.prototype.getParent = function () {
return $(this.options.parent)
  .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
  .each($.proxy(function (i, element) {
    var $element = $(element)
    this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
  }, this))
  .end()
}

Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')

$element.attr('aria-expanded', isOpen)
$trigger
  .toggleClass('collapsed', !isOpen)
  .attr('aria-expanded', isOpen)
}

function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
  || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7

return $(target)
}

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" class="collapsed">
      <img class="img-responsive img-team-bio" src="http://placehold.it/150" contenteditable="false">
      <h4 class="">Name 1</h4>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" role="tab" class="collapsed">
      <img class="img-responsive img-team-bio" src="http://placehold.it/150" contenteditable="false">
      <h4 class="">Name 2</h4>
    </a>
  </div>
  <div class="col-md-12 panel">
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <h4 class="">This is for person 1</h4>
    </div>
  </div>
  <div class="col-md-12 panel">
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <h4 class="">This is for person 2</h4>
    </div>
  </div>
  ...
</div>

#accordion .panel { box-shadow:none; border:none; margin:0; }
#accordion a { color:red; }
#accordion a.collapsed { color:#000; }