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.

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).

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: http://tinyurl.com/m2u5t7d

Answer 1

I would try it this way:

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

Answer 2

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

Answer 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");