Mam skrypt rozwijający tekst schodkowo. Obecnie jest tak że po kliknięciu się rozwija. Potrzebuję zrobić tak aby po najechaniu myszką automatycznie rozwijal się ale tylko pierwszy stopień czyli w tym przypadku "Medycyna estetyczna" a reszta rozwijała się po kliknięciu.
Link do działającego skryptu: http://damianpolny.hcore.pl/css/
Kod
<html>
<haed>
<link rel="stylesheet" type="text/css" href="http://damianpolny.hcore.pl/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://damianpolny.hcore.pl/css/jquery.accordion.css">
<script src="http://damianpolny.hcore.pl/css/jquery.min.js"></script>
<script type="text/javascript" src="http://damianpolny.hcore.pl/css/jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-accordion]').mouseover(function() {
$('#only-one [data-accordion]').accordion();
$('#multiple [data-accordion]').accordion({
singleOpen: false
});
$('#single[data-accordion]').accordion({
transitionEasing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transitionSpeed: 200
});
});
});
</script>
</head>
<body>
<section id="multiple" data-accordion-group>
<section data-accordion>
<button_2 data-control>Medycyna estetyczna</button_2>
<div data-content>
<article data-accordion>
<button data-control>Kwas hialuronowy</button>
<div data-content>
<article>Oferujemy indywidualne, bezpłatne konsultacje przed zabiegiem. Cena ustalana indywidualnie.</article>
</div>
</article>
<article data-accordion>
<button data-control>Mezoterapia igłowa</button>
<div data-content>
<article><table style="text-align: left; width: 333px;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 219px;">Miejscowo<br>
</td>
<td style="vertical-align: top; width: 96px;">200 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Oczy<br>
</td>
<td style="vertical-align: top; width: 96px;">250 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Twarz<br>
</td>
<td style="vertical-align: top; width: 96px;">350 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Twarz, szyja,
dekolt<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Głowa<br>
</td>
<td style="vertical-align: top; width: 96px;">300 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Brzuch<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Uda<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Pośladki<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
</tbody>
</table></article>
</div>
</article>
</div>
</section>
</body>
</html>
<haed>
<link rel="stylesheet" type="text/css" href="http://damianpolny.hcore.pl/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://damianpolny.hcore.pl/css/jquery.accordion.css">
<script src="http://damianpolny.hcore.pl/css/jquery.min.js"></script>
<script type="text/javascript" src="http://damianpolny.hcore.pl/css/jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-accordion]').mouseover(function() {
$('#only-one [data-accordion]').accordion();
$('#multiple [data-accordion]').accordion({
singleOpen: false
});
$('#single[data-accordion]').accordion({
transitionEasing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
transitionSpeed: 200
});
});
});
</script>
</head>
<body>
<section id="multiple" data-accordion-group>
<section data-accordion>
<button_2 data-control>Medycyna estetyczna</button_2>
<div data-content>
<article data-accordion>
<button data-control>Kwas hialuronowy</button>
<div data-content>
<article>Oferujemy indywidualne, bezpłatne konsultacje przed zabiegiem. Cena ustalana indywidualnie.</article>
</div>
</article>
<article data-accordion>
<button data-control>Mezoterapia igłowa</button>
<div data-content>
<article><table style="text-align: left; width: 333px;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 219px;">Miejscowo<br>
</td>
<td style="vertical-align: top; width: 96px;">200 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Oczy<br>
</td>
<td style="vertical-align: top; width: 96px;">250 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Twarz<br>
</td>
<td style="vertical-align: top; width: 96px;">350 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Twarz, szyja,
dekolt<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Głowa<br>
</td>
<td style="vertical-align: top; width: 96px;">300 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Brzuch<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Uda<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 219px;">Pośladki<br>
</td>
<td style="vertical-align: top; width: 96px;">450 zł<br>
</td>
</tr>
</tbody>
</table></article>
</div>
</article>
</div>
</section>
</body>
</html>