Search jQuery

jQuery Forum

Using jQuery UI

alireza.m

How to put a simple hr tag inside accordion?

in Using jQuery UI • 4 months ago

Hello!

I have created a styled hr tag and want to use it inside ui accordion after every item like this code:

<div id="accordion">
<h3><a href="#">item#1</a></h3>
<div><p></p></div>
<hr />
<h3><a href="#">item#2</a></h3>
<div><p></p></div>
<hr />
<h3><a href="#">item#3</a></h3>
<div><p></p></div>
<hr />
<h3><a href="#">item#4</a></h3>
<div><p></p></div>
<hr />
</div>

But when I put these hr tags, accordion doesn't work.

I really in need of doing that.

any helps?

Kind regards!

Alireza.M

Replies(5)

kbwood.au

Re: How to put a simple hr tag inside accordion?

4 months ago

Just change the header option:

$('#accordion').accordion({header: 'h3'});

alireza.m

Re: How to put a simple hr tag inside accordion?

4 months ago

Hello and thanks for your answer but actually I think you didn't get my question.

I don't have any issues with heading tags like h3 , I want to use hr tags in accordion which puts a line after every item inside accordion.

when I use hr tag the accordion doesn't work.

jakecigar

Re: How to put a simple hr tag inside accordion?

4 months ago

Everything has to be inside the <h3> or the <div>

<div id="accordion">
<h3><a href="#">item#1</a></h3>
<div><p></p> <hr /></div>
<h3><a href="#">item#2</a></h3>
<div><p></p> <hr /></div>
<h3><a href="#">item#3</a></h3>
<div><p></p> <hr /></div>
<h3><a href="#">item#4</a></h3>
<div><p></p> <hr /></div>
</div>

JΛ̊KE

alireza.m

Re: How to put a simple hr tag inside accordion?

4 months ago

Thanks,

But I want to seperate every item and with anothers with a hr tag (line) but when put it inside div when I open items it will be shown but when it's collapsed there isn't any line to seperate items.

jakecigar

Re: How to put a simple hr tag inside accordion?

4 months ago

It sounds to me like you need to change the CSS or use another accordion.

Makes nice boxes around the <h3>s. You could write your own CSS to use border-top only. What CSS are you using?

Here’s a nice red hr-looking border-bottom.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>accordion</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('#accordion').accordion({header: 'h3'});
})
</script>
<style type="text/css">
#accordion h3.ui-state-active {border-bottom:1px solid black}
#accordion div.ui-accordion-content-active,
#accordion h3{border-bottom:3px solid red
</style>
</head>
<body>
<div id="accordion">
<h3><a href="#">item#1</a></h3>
<div><p></p></div>
<h3><a href="#">item#2</a></h3>
<div><p></p></div>
<h3><a href="#">item#3</a></h3>
<div><p></p></div>
<h3><a href="#">item#4</a></h3>
<div><p></p</div>
</div>
</body>
</html>

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How to put a simple hr tag inside accordion?

Replies(5)

Re: How to put a simple hr tag inside accordion?

Re: How to put a simple hr tag inside accordion?

Re: How to put a simple hr tag inside accordion?

Re: How to put a simple hr tag inside accordion?

Re: How to put a simple hr tag inside accordion?

Statistics

Tags

Actions

Related Posts