I have a small script that should show a hidden div if the corresponding button is pressed. For example, if the button first-button is clicked than the div first-button-content should show. Right now, when I click on the button, chrome crashes and the div does not show.

Here is the html:

    <div class="home-middle-buttons">
        <div class="first-button">
            <span>I’m an In-House Marketer</span>
        </div>
        <div class="second-button">
            <span>I Work at an Agency</span>
        </div>
        <div class="third-button">
            <span>I’m a Business Owner</span>
        </div>
    </div>
    <div class="home-middle-content">
        <div class="first-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="second-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="third-button-content">
            <p>Lorem ipsum dolor.</p>
        </div>
    </div> 

Here is the script:

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        if (jQuery(".first-button").click()) {
            jQuery(".first-button-content").css( 'display', 'block' );
        } else {
            jQuery(".second-button-content").css( 'display', 'block' );
        }
    });
});

I have a small script that should show a hidden div if the corresponding button is pressed. For example, if the button first-button is clicked than the div first-button-content should show. Right now, when I click on the button, chrome crashes and the div does not show.

Here is the html:

    <div class="home-middle-buttons">
        <div class="first-button">
            <span>I’m an In-House Marketer</span>
        </div>
        <div class="second-button">
            <span>I Work at an Agency</span>
        </div>
        <div class="third-button">
            <span>I’m a Business Owner</span>
        </div>
    </div>
    <div class="home-middle-content">
        <div class="first-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="second-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="third-button-content">
            <p>Lorem ipsum dolor.</p>
        </div>
    </div> 

Here is the script:

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        if (jQuery(".first-button").click()) {
            jQuery(".first-button-content").css( 'display', 'block' );
        } else {
            jQuery(".second-button-content").css( 'display', 'block' );
        }
    });
});

• javascript
• jquery

• 3 Only Chrome crashes? 0_0 – Ivan Chernykh Commented May 19, 2013 at 1:59
• 1 Firefox does not crash. It shows "too much recursion" in the console. – acdcjunior Commented May 19, 2013 at 2:00

3 Answers 3

Your problem is this line:

if (jQuery(".first-button").click()) {

Calling .click() actually triggers a click event, it doesn't test if a click has occurred. So then that in turn calls your click handler, which gets to that line and triggers a click, which calls the handler, etc.

Try this:

if (jQuery(this).hasClass("first-button")) {

Within your click handler, this refers to the particular button that was clicked, and jQuery's .hasClass() returns a boolean for whether the element has that class.

But a nicer way to set the whole thing up would be as follows:

<div class="home-middle-buttons">
    <div data-associated-content="first-button-content">
        <span>I’m an In-House Marketer</span>
    </div>
    <div data-associated-content="second-button-content">
        <span>I Work at an Agency</span>
    </div>
    <div data-associated-content="third-button-content">
        <span>I’m a Business Owner</span>
    </div>
</div>
<div class="home-middle-content">
    <!-- as in the question -->
</div> 

With this JS:

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        var associatedDiv = jQuery(this).attr("data-associated-content");
        jQuery("." + associatedDiv).show();
    });
});

Demo: http://jsfiddle/uHzTB/

Note: if data-associated-content seems kind of long feel free to use data-something-shorter. Also, the classes on your content divs seem to uniquely identify those divs so I'd suggest that it would be more logical to make them an id rather than a class.

Because you have kind of recursive function call , this line is problematic:

if (jQuery(".first-button").click()) {

it calls this:

jQuery(".home-middle-buttons div").click(function() {

and this calls the first again, so it is recursive

jQuery(".first-button").click()

Now, that's not how you get the clicked element. Instead, it is a shortcut for .trigger("click") - you basically are creating an infinite loop by firing the event handler again and again.

Instead, you want to test the current element - this - whether it is the first button:

$(this).is(".first-button")

You might as well use the hasClass method.