Click on an element triggers the click on another element [JQuery]

Question

I have a top menu with the buttons home, prodotti, info and contatti. Below there is an accordion menu that has always an open slide and when you click on a title it changes and opens the relative slide.

screenshot

I would like that when I press for example on contatti in the top menu it triggers the click on contattaci in the accordion menu so that the relative slide opens as if i clicked directly on contattaci (using JQuery).

screenshot2

The HTML of the top menu looks like this:

<div id='cssmenu'>
                    <ul>
                        <li id="home" class='active'><span>Home</span></li>

                        <li id="prodotti"><span>Prodotti</span></li>

                        <li id="info"><span>Info</span></li>

                        <li id="contact" class='last'><span>Contatti</span></li>
                    </ul>
                </div>

The HTML of the accordion menu looks like this:

<div class="container">
<div id="demo">
<ol>
...................
<li id="contattaci">
<h2><span>Contattaci</span></h2>
<div>
<iframe src="form.php"width="625px" height="400px" ></iframe>
</div>
<p class="ap-caption">e-mail</p>
</li>
......
</ol>
</div>
<div>

So when I click on the contatti item of the top menu (with id="contact") I would like to simulate a click on "contattaci" in the accordion menu (with id="contattaci") so that a slide with a contact form opens next to "contattaci".

I'm not sure that it is possible, anyway I tried using this JQuery code:

<script>
    $(document).on('click', '#contact', function() {
        $("#contattaci").click();
    });
</script>

This doesn't work. I hope you can help me to fix the problem.

EDIT: The css accordion menu uses css3 but also a jquery library called jquery.accordionpro.min.js that makes use of JQuery Swipe library (https://github.com/jgarber623/jquery-swipe). Probably the slide can be opened using a function in Jquery Swipe library. What do you think? If you can help let me know.

Link to the website for further analysis:

Here's the solution stackoverflow.com/questions/9183381/… if (e.target !== e.currentTarget) return — Alex78191
– Alex78191, Commented Sep 20, 2022 at 13:49

pschueller · Accepted Answer · 2014-02-09 21:23:43Z

32

I would try it this way:

$(document).on('click', '#contact', function(event) { 
    event.preventDefault(); 
    $("#contattaci h2").click(); 
});

edited Feb 9, 2014 at 21:23

answered Feb 9, 2014 at 18:00

pschueller

4,4352 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Fabio Over a year ago

I tried but I think it doesn't work and I think I know why. The click() method in JQuery just intercept the click, triggers a function when a click occures but it doesn't simulate a real click of the user. The DOM ready or not, doesn't solve the problem. I think we need another solution.

pschueller Over a year ago

hmm, I'd have to see more of the code... can you post a link to the site?

Fabio Over a year ago

ok, obviously it's still under contruction, anyway here the link is: tinyurl.com/m2u5t7d . You can take a look. Thanks.

pschueller Over a year ago

I still think the above code should work, it works for me locally. Try targetting the h2 element instead: $("#contattaci h2").click();.

pschueller Over a year ago

Also make sure those IDs actually exist, I did not see them in the source.

|

Pramod Kharade · Accepted Answer · 2017-09-11 11:33:40Z

7

$(document).on('click', '#contact', function(e) {
    $("#contattaci").trigger('click');
});

answered Sep 11, 2017 at 11:33

Pramod Kharade

2,0951 gold badge26 silver badges41 bronze badges

1 Comment

Arman H Over a year ago

for latest version of jQuery this worked for me version > 3

kwyjibear · Accepted Answer · 2018-07-13 21:34:03Z

3

I know I'm a little late to the party but...For the inner click

$("#contattaci h2").click();

change it to

$("#contattaci h2").trigger("click");

answered Jul 13, 2018 at 21:34

kwyjibear

1308 bronze badges

Collectives™ on Stack Overflow

Click on an element triggers the click on another element [JQuery]

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related