Slidetoggle wrong class not working
I created slidetoggle but it doesn't work. In general, if I were to hang this year then months would be displayed via slidetoggle but its not working ... Probably the class on the script is wrong. Fiddle example
HTML:
<div class="smart-archives">
<ul>
<a class="year-link" href="http://net/2015">2015</a>:
<li><a class="month-link" href="http://.net/2015/01" title="1 post">January</a></li>
<li><a class="month-link" href="http://.net/2015/02" title="1 post">February</a></li>
<li><a class="month-link" href="http://.net/2015/03" title="16 posts">March</a></li>
<li><a class="month-link" href="http://.net/2015/04" title="13 posts">April</a></li>
<li><a class="month-link" href="http://.net/2015/05" title="9 posts">May</a></li>
<li><a class="month-link" href="http://.net/2015/06" title="4 posts">June</a></li>
<li class="empty-month">July</li>
<li class="empty-month">August</li>
<li class="empty-month">September</li>
<li class="empty-month">October</li>
<li class="empty-month">November</li>
<li class="empty-month">December</li>
</ul>
<ul>
<a class="year-link" href="http://.net/2014">2014</a>:
<li class="empty-month">January</li>
<li><a class="month-link" href="http://.net/2014/02" title="14 posts">February</a></li>
<li><a class="month-link" href="http://.net/2014/03" title="25 posts">March</a></li>
<li><a class="month-link" href="http://.net/2014/04" title="11 posts">April</a></li>
<li><a class="month-link" href="http://.net/2014/05" title="11 posts">May</a></li>
<li><a class="month-link" href="http://.net/2014/06" title="5 posts">June</a></li>
<li><a class="month-link" href="http://.net/2014/07" title="4 posts">July</a></li>
<li><a class="month-link" href="http://.net/2014/08" title="6 posts">August</a></li>
<li><a class="month-link" href="http://.net/2014/09" title="6 posts">September</a></li>
<li><a class="month-link" href="http://.net/2014/10" title="3 posts">October</a></li>
<li><a class="month-link" href="http://.net/2014/11" title="4 posts">November</a></li>
<li><a class="month-link" href="http://.net/2014/12" title="1 post">December</a></li>
</ul>
</div>
CSS
ul li { display:none; }
.empty-month { display: none; }
SCRIPT:
$("ul > li").hover(function () {
$(this).children("ul li").slideToggle("fast");
});
source to share
You should slide the switch sibling
li
on hover anchor
as shown below:
$("ul > a").hover(function () {
$(this).siblings("li").slideToggle("fast");
});
and you may run into problems below if you keep this parameter to hover
- It might not work on mobile
- This will prevent you from clicking through the months when you link
hoverout
So, I suggest using the same functions on click
as
$("ul > a").click(function (e) {
e.preventDefault();
$(this).siblings("li").slideToggle("fast");
});
source to share
li
is the old valid child ul
, so
<ul>
<li><a class="year-link" href="http://thegypsetters.net/2015">2015</a>:</li>
<li><a class="month-link" href="http://thegypsetters.net/2015/01" title="1 post">January</a>
then
$("ul > li:has(.year-link)").hover(function () {
$(this).siblings().slideToggle("fast");
});
and
ul li {
display:none;
}
ul li:first-child {
display: list-item;
}
Demo: Fiddle
source to share