All geek questions in one place

Bootstrap 3 Collapse everything that led me to the top of the page and doesn't work

I have a page created using bootstrap 3. I found code example on how to build a forum and I set it up a bit. In the lower forum toping (criticism) I want to be able to click on it, and when I do this, under it, expose the information. For the moment, I just have “testing”, but later I will add html tags and style.

What is happening now is when I click on a topic that brings me to the top of the page, and "testing" appears above no lower.

Here is my jsfiddle

https://jsfiddle.net/mattmega4/kdoxsoo9/

      <div class = "navbar navbar-default navbar-static-top">
      <div class="container">
        <a href ="index.html" class="navbar-brand">U.P.M.</a>
        <img src="assets/camera.png" class="pull-left">
        <button class="navbar-toggle" data-toggle = "collapse" data-
target = ".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>


        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle = 
"dropdown">Options<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id=default><a  href="#">Change Theme</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </div>
  </div>



<div class="bigpappa">
  <div class="container well">
    <div class="page-header page-heading">
      <h1 class="pull-left">Forums</h1>
      <ol class="breadcrumb pull-right where-am-i">
        <li><a href="#">Forums</a></li>
        <li class="active">List of topics</li>
      </ol>
      <div class="clearfix"></div>
    </div>
    <p class="lead">Welcome to the United Photographers Movement! Here  
you can post general or specific photography questions as well as 
locations to shoot. Finally, you can also post examples of your work 
for critique. <b>Note</b> Please check older posts before you post your 
own to make sure your question isn't already answered!</p>
    <table class="table forum table-striped">
      <thead>
        <tr>
          <th class="cell-stat"></th>
          <th>
            <h3>Questions</h3>
          </th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
          <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center"><i class="fa fa-question fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Frequently Asked Questions</a><br>
<small>General Questions</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>

        <tr>
          <td class="text-center"><i class="fa fa-question fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Specific Questions</a><br><small>Questions 
about specific cameras or techniques for specific locations etc...
</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>
      </tbody>
    </table>
    <table class="table forum table-striped">
      <thead>
        <tr>
          <th class="cell-stat"></th>
          <th>
            <h3>Locations</h3>
          </th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
          <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center"><i class="fa fa-heart fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Alabama</a><br><small>Search locations by 
state</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">6532</a></td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">152123</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">Jane Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>
        <tr>
          <td class="text-center"><i class="fa fa-magic fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Alaska</a><br><small>Search locations by 
state</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">6532</a></td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">152123</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">Jane Doe</a>
<br><small><i class="fa fa-clock-o"></i> 1 years ago</small></td>
        </tr>
      </tbody>
    </table>

    <table class="table forum table-striped">

      <table class="table forum table-striped">
        <thead>
          <tr>
            <th class="cell-stat"></th>
            <th>
              <h3>Critique</h3>
            </th>
            <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
            <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
            <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center"><i class="fa fa-question fa-2x 
text-primary"></i></td>
            <td>
              <h4 class="theBigCollapse" data-toggle="collapse" data-
target=".collapse"><a href="#">Get your work critiqued</a><br>
<small>Please link your photographs <b>DO NOT</b> try to upload!
</small></h4>
            </td>
            <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
            <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
            <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
          </tr>
        </tbody>


        <div class="collapse">

          Testing
        </div>


      </table>




    </table>
  </div>
  </div>







  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">
        Site built by Self Aware Machines
      </p>

  <p>
    <div class="input-group col-lg-3 pull-right">
      <input type="text" class="form-control" placeholder="Search  
Site"/>
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Search</button>
      </span>

    </div>
  </p>


$(document).ready(function(){
$(".theBigCollapse").click(function(){
    $(".collapse").collapse('toggle');
});


.bigpappa{
  padding: 55px;
}

.forum.table > tbody > tr > td {
    vertical-align: middle;
}

.forum .fa {
    width: 1em;
    text-align: center;
}

.forum.table th.cell-stat {
    width: 6em;
}

.forum.table th.cell-stat-2x {
    width: 14em;
}
+4
source share
2 answers

# onclick , theBigCollapse. html, , , - class, id.

, $("#theBigCollapse") $(".theBigCollapse")

, , . <a href="#">Get your work critiqued</a>

, . :

$(".theBigCollapse a").click(function(e){
    e.preventDefault();
});

JS :

$(document).ready(function(){
    $(".theBigCollapse").click(function() {
        $(".collapse").collapse('toggle');
    });

    $(".theBigCollapse a").click(function(e){
        e.preventDefault();
    });
});

Fiddle

, "" , , , div table, .

.

<table class="table forum table-striped">
  <tr>
    <td>....</td>
  </tr>...
  <div class="collapse">
    Testing
  </div> 
</table>

, div <td></td> <table></table>.

.

<table class="table forum table-striped">
  <tr>
    <td>....</td>
  </tr>...
</table>

<div class="collapse">
  Testing
</div>

Fiddle

P.S , , , . .

:

<table>
 <table>
   <tr><td>...</td></tr>
 </table>
</table>
+1

JS :

$(document).ready(function(){
 $(".theBigCollapse").click(function(){
    $(".collapse").collapse('toggle');
  });
});

, ( )

, , target = ". collapse"

<h4 class="theBigCollapse" data-toggle="collapse" data-target=".collapse">

data-target = ". collapse", , JavaScript .

+1

Source: https://habr.com/ru/post/1599189/

More articles:


All Articles