22

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:

1

3 Answers 3

29

I would try it this way:

$(document).on('click', '#contact', function(event) { 
    event.preventDefault(); 
    $("#contattaci h2").click(); 
});
8
  • 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.
    – Fabio
    Feb 9, 2014 at 18:39
  • hmm, I'd have to see more of the code... can you post a link to the site?
    – pschueller
    Feb 9, 2014 at 19:00
  • ok, obviously it's still under contruction, anyway here the link is: tinyurl.com/m2u5t7d . You can take a look. Thanks.
    – Fabio
    Feb 9, 2014 at 19:08
  • I still think the above code should work, it works for me locally. Try targetting the h2 element instead: $("#contattaci h2").click();.
    – pschueller
    Feb 9, 2014 at 19:31
  • Also make sure those IDs actually exist, I did not see them in the source.
    – pschueller
    Feb 9, 2014 at 19:41
6
$(document).on('click', '#contact', function(e) {
    $("#contattaci").trigger('click');
});
1
  • for latest version of jQuery this worked for me version > 3
    – Arman H
    Jun 28, 2021 at 6:05
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");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.