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:

Koedlt
  • 4,286
  • 8
  • 15
  • 33
Fabio
  • 2,074
  • 2
  • 24
  • 38
  • Here's the solution https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children `if (e.target !== e.currentTarget) return` – Alex78191 Sep 20 '22 at 13:49

3 Answers3

29

I would try it this way:

$(document).on('click', '#contact', function(event) { 
    event.preventDefault(); 
    $("#contattaci h2").click(); 
});
pschueller
  • 4,362
  • 2
  • 27
  • 50
  • 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 09 '14 at 18:39
  • hmm, I'd have to see more of the code... can you post a link to the site? – pschueller Feb 09 '14 at 19:00
  • ok, obviously it's still under contruction, anyway here the link is: http://tinyurl.com/m2u5t7d . You can take a look. Thanks. – Fabio Feb 09 '14 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 09 '14 at 19:31
  • Also make sure those IDs actually exist, I did not see them in the source. – pschueller Feb 09 '14 at 19:41
  • Yes, I planned to edit the names of the IDs, the actual code has another name, anyway I tried your code correctly. Now I change it and i try targetting h2, thanks :) – Fabio Feb 09 '14 at 20:23
  • I tried, you can check my code. I rewrote the id names in order not to create confusion and I used: $("#contattaci h2").click(); It still doesn't work for me (Contattaci doesn't open). Strange. – Fabio Feb 09 '14 at 20:33
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47129/discussion-between-pschueller-and-fabio) – pschueller Feb 09 '14 at 20:44
6
$(document).on('click', '#contact', function(e) {
    $("#contattaci").trigger('click');
});
Pramod Kharade
  • 2,005
  • 1
  • 22
  • 41
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");
kwyjibear
  • 131
  • 6