search

danielstocks / jQuery-Collapse

A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content
http://webcloud.se/jQuery-Collapse/
MIT License
679 stars 153 forks source link

Double hyperlink #44

Closed Kapitol closed 11 years ago

Kapitol commented 11 years ago

In order to take advantage of the slideup/slidedown feature when opening and closing, I added the code below the linked in JS files[as instructed to do so in the sample code]:

<script>
new jQueryCollapse($(".toggle"), {
              open: function() {
                this.slideDown(150);
              },
              close: function() {
                this.slideUp(150);
              }
            });     
</script>

By adding the above code, it generates 2 hyperlinks in the HTML.

    <a href="#">
        <a href="#">Name</a>
    </a>

Has anyone experienced this and has anyone found a fix?

danielstocks commented 11 years ago

Hey,

What does your original markup look like?

Kapitol commented 11 years ago

Sorry, for the delayed response. Do you want to see the CSS too?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express Quote - Contractor Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="../style/css/bootstrap.css" rel="stylesheet">
<link href="../style/css/demo_table.css" rel="stylesheet" type="text/css">
<link href="../style/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../style/includes/fonts/stylesheet.css" rel="stylesheet" type="text/css">
<link href="../style/css/express.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
</head>

<body>
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand ir" href="../index.html">Express Quote</a>
      <div id="menu-main-cont" class="pull-right"> <a href="contractor-admin.html" class="main-menu-item topactive cntr">Contractor<span class="selector"></span></a> <span class="mspacer"></span> <a href="/" class="malerts">3</a> <span class="mspacer"></span>
        <ol>
          <li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><strong>Name</strong> <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
              <li><a tabindex="-1" href="http://google.com">Action</a></li>
              <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
        </ol>
      </div>
      <!--/.nav-collapse --> 
    </div>
  </div>
</div>
<div class="container dashbs">
<div id="menu-singcont"> <a href="/" class="top-menu-item miactive contdashdmin">Dashboard:<strong>--</strong><span class="phshadow"></span></a> <a href="admin-project.html" class="top-menu-item ntproj">--<span class="phshadow"></span></a> <a href="admin-archive.html" class="top-menu-item ntproj">--<span class="phshadow"></span></a></div>
<div class="well basic">
<div class="row dbmain">
  <div class="functionbox">
    <h2>Adminstration</h2>
  </div>
  <div class="toggle" id="open-by-default-example" data-collapse>
    <h3 class="open">--</h3>
    <div>
      <div class="btnplace-usrl">
        <div class="btn-group-usrl"></div>
      </div>
      <div id="demo-1" class="collapse in">
        <div class="searchdrop" id="sdmyp"></div>
        <div class="whitebox">
          <div id="cont-myprojects">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="usertbl">
              <thead>
                <tr class="gradeshade">
                  <th>--</th>
                  <th>Name</th>
                  <th>Date</th>
                  <th>--</th>
                  <th>--</th>
                  <td class="center"><i class="icon-edit"><span class="ir" title="Edit this User">Edit</span></i></td>
                </tr>
              </thead>
              <tbody>
                <tr class="gradeX">
                  <td>ii@imsuperawesome.com</td>
                  <td>Ryan Anderson</td>
                  <td>11/09/2012</td>
                  <td class="center" title="Admin"><i class="icon-globe ir">User</i></td>
                  <td class="center">0</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeC">
                  <td>steward@john.com</td>
                  <td></td>
                  <td>11/09/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">5</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeA">
                  <td>nachapman@gmail.com</td>
                  <td>Nate Chapman</td>
                  <td>11/09/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">1</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeA">
                  <td>richard_cheney@deathstar.com</td>
                  <td>Darth Vader</td>
                  <td>10/14/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">0</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeA">
                  <td>naren.parimi@gmail.com</td>
                  <td>Chuck Berry</td>
                  <td>12/04/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">56</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeA">
                  <td>joshdufman@gmail.com</td>
                  <td>Bob Rodgers</td>
                  <td>12/04/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">6</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
                <tr class="gradeA">
                  <td>email@company.com</td>
                  <td>Rodger Tilman</td>
                  <td>12/04/2012</td>
                  <td class="center" title="User"><i class="icon-user ir">User</i></td>
                  <td class="center">4</td>
                  <td class="center"><i class="icon-pencil"><span class="ir" title="Edit this User">Pencil</span></i></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <a href="#myModal" role="button" class="btn btn-warning pull-right exel padds" data-toggle="modal">Add New User</a>
        </div>
    </div>
  </div>
  <!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Add New User</h3>
  </div>
  <div class="modal-body">
    <p>All fields are required</p>
    <label for="email">Email (Username)</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="name">Pin</label>
    <span class="input-large uneditable-input">EQ98KN7</span>
    <label for="role">Role</label>
    <select name="role" id="urole" class="text ui-widget-content ui-corner-all">
      <option>Select a Role</option>
      <option>User</option>
      <option>Admin</option>
    </select>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
  <div class="toggle" data-collapse>
    <h3>Licensing Details</h3>
    <div>
      <div class="whitebox">
        <dl>
          <dt>General Information</dt>
          <dd><strong>Account holder:</strong> Name</dd>
          <dd><strong>Account Type:</strong> NA</dd>
          <dd><strong>Date Activated:</strong> Month, Day, Year</dd>
          <dd><strong>Date of Expiration:</strong> Month, Day, Year</dd>
        </dl>
        <dl>
          <dt>Price Information</dt>
          <dd><strong>Monthly Bill:</strong> $20.00</dd>
          <dd><strong>Active Discounts:</strong> N/A</dd>
          <dd><strong>Status:</strong> Monthly</dd>
        </dl>
        <form class="alert alert-info form-horizontal transfer">
          <label>Transfer</label>
              <i class="icon-signout icon-2x"></i> <input type="text" placeholder="Username">
            <hr class="clear">
            <div>
              <button type="submit" class="btn btn-primary">Transfer</button>
              <button type="button" class="btn">Cancel</button>
              </div>
        </form>
      </div>
    </div>
  </div>
  </div>
  <div class="aside">
   <div class="company-profile"> <img src="../style/img/avatar.png" width="51px" height="51px"> <span><strong>Company Name</strong> <br>
      <i class="icon-map-marker"></i> Lincoln</span> </div>
  <div class="sidebox">
  <div class="alertbox">
        <div class="toggle" data-collapse>
          <h3 class="open">Alerts</h3>
          <div>
            <table cellpadding="0" cellspacing="0" border="0" class="display lights" id="alerts">
              <thead>
                <tr class="gradeshade">
                  <th><i class="icon-eye-open"></i></th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="center "><i class="icon-money icon-large"><span class="ir" title="Not Responding"></span></i></td>
                  <td class="">10 Days left</td>
                </tr>
                <tr>
                  <td class="center"><i class="icon-file icon-large"><span class="ir" title="Not Responding"></span></i></td>
                  <td class="">New Created</td>
                </tr>
                <tr>
                  <td class="center info"><i class="icon-comment icon-large"><span class="ir" title="Not Responding"></span></i></td>
                  <td class="">New Received</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>
    <div class="sidebox">
      <div class="toggle" data-collapse>
    <h3 class="open">Current</h3>
    <div>
          <div class="btnplace-newpro"></div>
          <div class="btn-group-newpro"></div>
    <div class="searchdrop" id="npro"></div>
          <div class="new-proj-rev">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="newprojrev">
              <thead>
                <tr class="gradeshade">
                  <th>Project Name</th>
                  <th>Owner</th>
                </tr>
              </thead>
              <tbody>
                <tr class="gradegray">
                  <td>Office Park: #405</td>
                  <td class="owner-name">Gary Elbert</td>
                </tr>
                <tr class="gradegray">
                  <td>Mutual of Omaha</td>
                  <td class="owner-name">Marty McFly</td>
                </tr>
                <tr class="gradegray">
                  <td>UNL</td>
                  <td class="owner-name">Zach Galifianakis</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

</div>
</div>
</div>
<script src="../style/js/jquery.js"></script> 
<script src="../style/js/bootstrap-dropdown.js"></script> 
<script src="../style/js/bootstrap-button.js"></script> 
<script src="../style/js/bootstrap-modal.js"></script>  
<script src="../style/js/bootstrap-transition.js"></script> 
<script src="../style/js/jquery.collapse.js"></script> 
<script src="../style/js/jquery.collapse_storage.js"></script> 
<script src="../style/js/jquery.collapse_cookie_storage.js"></script> 
<script src="../style/js/jquery.dataTables.js"></script> 
<script src="../style/js/jquery.dataTables.rowGrouping.js"></script> 
<script src="../style/js/dataTables.bootstrap.js"></script>  
<script>
            $(document).ready(function() {
                $('#usertbl').dataTable( {
                    "sDom": "<'row'<''l><'searchtbl'f>r>t<'row'<''i><'pgin'p>>",
                    "sPaginationType": "bootstrap"
                } );
                $('#archprojrev').dataTable( {
                    // "sDom": "<'row'<''l><'searchtbl'f>r>t<'row'<''i><'pagination-mini'p>>",
                        "sDom": "<'row'<''l><'searchtbl'f>r>t<'row'<''i><'pagination-mini'p>>",
                        "sPaginationType": "bootstrap"
                    } );
                $('#newprojrev').dataTable( {
                        "sDom": "<'row'<''l><'searchtbl'f>r>t<'row'<''i><'pagination-mini'p>>",
                        "sPaginationType": "bootstrap"
                    } );    
            new jQueryCollapse($(".toggle"), {
              open: function() {
                this.slideDown(150);
              },
              close: function() {
                this.slideUp(150);
              }
            });     
            } );
          $(document).ready(function(){
            $("#usertbl_info").appendTo(".btnplace-usrl");
            $("#usertbl_length").appendTo(".btn-group-usrl");
            $("#usertbl_filter").appendTo("#sdmyp");
            $("#newprojrev_filter").appendTo("#npro");
            $("#archprojrev_filter").appendTo("#apro");

            $("#archprojrev_length").appendTo(".btnplace-arch");
            $("#archprojrev_info").appendTo(".btn-group-arch");

            $("#newprojrev_length").appendTo(".btnplace-newpro");
            $("#newprojrev_info").appendTo(".btn-group-newpro");
          });
        </script>

</body>
</html>
danielstocks commented 11 years ago

Ah, you shouldn't have the "data-collapse" attribute on the element if your activating it through JavaScript, they are simply two different ways of activating the plugin.

So it looks like you run the plugin twice at the moment. Therefor the double set of elements.