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
The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
jQuery trigger() Method The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements. This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event.
So onclick creates an attribute within the binded HTML tag, using a string which is linked to a function. Whereas . click binds the function itself to the property element.
The click() method simulates a mouse-click on an element. This method can be used to execute a click on an element as if the user manually clicked on it.
I would try it this way:
$(document).on('click', '#contact', function(event) {
event.preventDefault();
$("#contattaci h2").click();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With