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

Question

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.

what do you exactly mean by "without setting function as inline element"? — xuhaib
– xuhaib, Commented Apr 18, 2018 at 22:14
yes i do. but you said "function as an inline element", which is not the same as "inline function on an element". anyhow, have you considered hidden.bs.collapse or hide.bs.collapse events on .collapse element? — xuhaib
– xuhaib, Commented Apr 18, 2018 at 22:22

ice cream · Accepted Answer · 2018-04-18 22:24:38Z

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>

That is exactly what I need. I even found more simple solution placing data-code value in href attribute. That will make everything even more easier. Thank you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related