{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 够拽才男人 的问题《CSS Accordion -> Adding jquery to change “hover” t》','https://www.manongdao.com/q-897953.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm using a pure css accordion, which works as I intended it, with a "hover" function which opens the slides. However I was looking to change this to a toggle so that when you click, it opens, when you click it closes. I found this thread which explained how to do it and provided the JS to do so:
Convert hover accordion to onclick
However after adding jquery and the script to my html, it doesn't seem to work:
(idk why the title on the accordion doesn't appear where it should, this is only an issue on fiddle, it works as a webpage.)
$('h3','.accordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
I'm guessing the js that I took from the thread above is wrong somehow, but I'm not sure where. I've tried to make sure it's relating to the css I'm using, but I'm not a coder, so I may be missing something obvious.
p.s. the JS above and in the fiddle is taken "as is" from the other thread, I have tried removing the 'h3' etc. to make sure it wasn't that which was causing a problem, but apparently not.
edit: Sorry, forgot to mention, this must be IE8 compatible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS accordion</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
<ul class="accordion" id="vertical">
<li class="slide-01">
<div>
<h2>Title goes Here</h2>
<br /> <img src="http://i.imgur.com/ezY207l.gif" height="125" width="180" /> <taxt>Text here</taxt></div>
</li>
</ul>
<script src="jquery.js"></script>
<script $('h3','.accordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
</script>
</body>
</html>
Edit2: Posted my HTML above incase I've made an error here. Maybe. Probably. Edit3: Okay, seems to be a problem with me having the JS in the body, same if I change it to in the head.
You had two problems. Your jQuery selector was incorrect and you needed to update your
:hovercss selector changing it to a.hoverclass:New Selector:
New Css
jsFiddle
The script you need is
You then need to update the css so that it uses the
.hoverinstead of:hoverNew fiddle: http://jsfiddle.net/fLkaG/