Call content with button. Js Issue

javascript click button by id
onclick javascript
jquery onclick call function
javascript trigger click event on element
javascript click button by class
javascript click event
jquery on click
javascript trigger click event programmatically

This is a follow up of Question

When clicking <label for="panel2-radio">Click to show Tab2</label> the action should be the same as when clicking <li class="tab-title"><label for="panel2-radio">Tab 2</li>

I can't figure out what I'm doing wrong.

$().ready(function(){
  $('.tab-title>label').click(function(e){
    e.preventDefault();
    var index = $(this).parent().index();
    $(this).parent().addClass('active')
         .siblings().removeClass('active')
         .parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
         .eq(index).addClass('active');
  });
})
.vertical-tabs:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-tabs {position: relative;margin-left: 200px;margin-top: 5%;margin-bottom: 5%}
.tabs {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 220px;
  margin-bottom: 0px;
  margin-left: -200px;
}
.tabs1 {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -200px;
}
.tabs li {
  position: relative;
  list-style: none;
}
.tabs li:after {
  content: "";
  display: table;
  clear: both;
}
.tabs li label{
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #ddd;
}
.tabs li.active label {
  z-index: 2;
  background-color: #424b59;
  color: #c2b697;
  border-right: 1px solid white;
}
.tabs-content{margin-left: 25px;}
.tabs-content .content-tab {
  display: none;
  padding: 10px;
}
.tabs-content .content.active{
  display: inline-block;width: 100%;}
.radio,
.content-tab {
  display: none;
}

.radio:checked+.content-tab.active, .content-tab.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
  <ul class="tabs vertical" data-tab="">
    <li class="tab-title active"><label for="panel1-radio">Tab 1</li>
    <li class="tab-title"><label for="panel2-radio">Tab 2</li>
  </ul>
  <div class="tabs-content">
    <input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
    <div class="content-tab active" id="panela1" aria-hidden="false">
      <p>This is tab 1</p>
      <label for="panel2-radio">Click to show Tab2</label>
    </div>
    <input type="radio" name="show-panel" id="panel2-radio" class="radio">
    <div class="content-tab" id="panelb1" aria-hidden="false">
      <p>This is tab 2</p>
    </div>
 </div>

Just listen on the click event of .content-tab labels and trigger the event of tab-title lables, tab2 in your case like :

$('.content-tab label').click(function(e) {
    $('.tab-title label[for="' + $(this).attr('for') + '"]').click();
});

$(function() {
  $('.tab-title>label').click(function(e) {
    e.preventDefault();
    var index = $(this).parent().index();

    $(this).parent().addClass('active')
      .siblings().removeClass('active')
      .parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
      .eq(index).addClass('active');
  });

  $('.content-tab label').click(function(e) {
    $('.tab-title label[for="' + $(this).attr('for') + '"]').click();
  });
})
.vertical-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.vertical-tabs {
  position: relative;
  margin-left: 200px;
  margin-top: 5%;
  margin-bottom: 5%
}

.tabs {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 220px;
  margin-bottom: 0px;
  margin-left: -200px;
}

.tabs1 {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -200px;
}

.tabs li {
  position: relative;
  list-style: none;
}

.tabs li:after {
  content: "";
  display: table;
  clear: both;
}

.tabs li label {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #ddd;
}

.tabs li.active label {
  z-index: 2;
  background-color: #424b59;
  color: #c2b697;
  border-right: 1px solid white;
}

.tabs-content {
  margin-left: 25px;
}

.tabs-content .content-tab {
  display: none;
  padding: 10px;
}

.tabs-content .content.active {
  display: inline-block;
  width: 100%;
}

.radio,
.content-tab {
  display: none;
}

.radio:checked+.content-tab.active,
.content-tab.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
  <ul class="tabs vertical" data-tab="">
    <li class="tab-title active"><label for="panel1-radio">Tab 1</a></li>
    <li class="tab-title"><label for="panel2-radio">Tab 2</a></li>
  </ul>
  <div class="tabs-content">
    <input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
    <div class="content-tab active" id="panela1" aria-hidden="false">
      <p>This is tab 1</p>
      <label for="panel2-radio">Click to show Tab2</label>
</div>
<input type="radio" name="show-panel" id="panel2-radio" class="radio">
<div class="content-tab" id="panelb1" aria-hidden="false">
  <p>This is tab 2</p>
</div>
</div>

Calling a Script when button clicked, I would like to call a script defined within script tags in the HEAD <div data-role​="content"> When the Button is clicked, I want the alert to be shown. Here is my 2 cents about this issue: I think the handler is defined too  jquery click doesn't work on ajax generated content. I am using $(".button").on("click", function(){ }); to click to a button which is on a container but then an ajax call is done and the content gets updated with new stuff and then when i try to click .button it wont work nothing will get returned when i click the button.

You are not closing the label tag properly. The closing a shouldn't be there.

your code <li class="tab-title"><label for="panel2-radio">Tab 2</a></li>

corrected <li class="tab-title"><label for="panel2-radio">Tab 2</label ></li>

try it out

HTMLElement.click(), JavaScript. // On mouse-over, execute myFunction function myFunction() { document.getElementById("myCheck").click(); }  Call a Javascript Function after UpdatePanel Postback Issue. I basically have in my UpdatePanel a literal that generates a javascript array based on a method in my codebehind.

The issue is that <label for="panel2-radio">Click to show Tab2</label> is not a child of "tab-title"; i.e. your code is looking for tab parent " .tab-title" and then child "label":

.tab-title>label

Please try wrapping this label with a div with the class "tab-title" :-)

Introduction to browser events, In the code below button shows its contents using this. If we add parentheses, then sayThanks() becomes is a function call. The fundamental problem of the aforementioned ways to assign handlers – we can't assign  Can you provide jsFiddle replicating your issue because as i understand your issue, this isn't expected behaviour I want that function call only when Radio button clicked by mouse, not on focus. Setting focus using keyboard doesn't fire click event as i'm aware of – A. Wolff Aug 17 '15 at 17:33 |

Handling Events :: Eloquent JavaScript, When clicked with the right mouse button, the handler for the button calls <​input> and <textarea> tags, fire "input" events whenever the user changes their content. To avoid the problems of having multiple threads touching the same data,  Using onclick to create a dropdown button: // Get the button, and when the user clicks on it, execute myFunction. document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */.

Issue with calling javascript function on onClick for aui:button, Issue with calling javascript function on onClick for aui:button. what the output HTML shows: <span class="aui-button-content"> <input class="aui-button-input"​  The only issue with the above code is, it displays the message whenever a character is pressed and not when the caps lock key is pressed. The KeyCode Finder. In the first example, we used key codes like 77, 66, 89, and 85. This example helps you to find out these keycodes.

Javascript · Bootstrap, If this happens, you may call .noConflict on the plugin you wish to revert the value of. var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to  Skip to content. pugjs / pug. Sign up Sign up for a free GitHub account to open an issue and contact its maintainers and the community. call onclick js

Comments
  • You're welcome, Glad I could help.
  • Like this? <div class="tab-title"> <label for="panel2-radio">Click to show Tab2</label> </div>