CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3toggle
espresso_coffee
espresso_coffee

Reputation: 6110

How to trigger function on data-toggle with Bootstrap Twitter?

Hello everyone I have list of items in one of the screens. Once user clicks on the item I want to hide that item show the other div container and trigger the function. Here is working example of what I have so far:

function appToggle() {
  var codeVal = $(this).data(code);
  console.log(codeVal);
}
<html lang="en">

<head>
  <title>My Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div id="main-container" class="container">
    <div id="master_list" class="collapse in">
      <fieldset>
        <legend>Application</legend>
        <div class="list-group">
          <a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
            <span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
          </a>
          <a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
            <span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
          </a>
        </div>
      </fieldset>
    </div>
    <div id="master_table" class="collapse">
      <div class="row">
        <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
                        <span class="glyphicon glyphicon-plus-sign"></span> Go Back
                    </button>
        </div>
      </div>
      Test Show/Hide container
    </div>
  </div>
</body>

</html>

As you can see in example above if user clicks on any item in the list new container will show and list will go off the screen. I would like once they click to trigger appToggle() function that will get code value for the current element. Is there a way to trigger this function automatically without setting function as inline element? If anyone know the way to achieve this please let me know.

Upvotes: 1

Views: 3032

Answers (1)

ice cream
ice cream

Reputation: 2470

Did you try doing that function as an onclick listener? e.g.

$('a.list-group-item').click(function() {
  var codeVal = $(this).children('span').data('code');
  console.log(codeVal);
});
<html lang="en">

<head>
  <title>My Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div id="main-container" class="container">
    <div id="master_list" class="collapse in">
      <fieldset>
        <legend>Application</legend>
        <div class="list-group">
          <a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
            <span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
          </a>
          <a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
            <span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
          </a>
        </div>
      </fieldset>
    </div>
    <div id="master_table" class="collapse">
      <div class="row">
        <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
                        <span class="glyphicon glyphicon-plus-sign"></span> Go Back
                    </button>
        </div>
      </div>
      Test Show/Hide container
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions