I am new to web design and i'm trying to build personal website.

Now i'm trying to do something that is in my head and see jQuery and javascript could maybe solve my problem but i'm stacked now.

I would like on one of my websites to have few panels, but i want only one panel i click on to open and not all like in mine. I know my code like this is problem and i'm asking someone to help me if its possible to open and show/hide only one i clicked on (it could be some other way like show/hide buttons)

Here is mine code of problem, any help i would be appreciated

[code]

<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".flip").click(function() {
			$(".panel").slideToggle("slow");
		});
	});
</script>

<style type="text/css">
div.panel,p.flip {
	margin: 0px;
	padding: 5px;
	text-align: center;
	background: #4199ec;
	border: solid 1px #fff;
}
 
div.panel {
	widht: 50%;
	height: 100px;
	display: none;
}
</style>


<b>LINE 1</b>
        <br>

        <div class="panel">
        <p>Here go text</p>
	</div>
 
	<br>
	<p class="flip">Click here to Show/Hide Line 1</p>
        </br>
 
	<br>
	<div align="center">
		
	</div>
    
<b>LINE 2</b>
    
        <br>

        <div class="panel">
        <p>Here go text</p>
        </div>
 
	<br>
	<p class="flip">Click here to Show/Hide Line 2</p>
        </br>
 
	<br>
	<br>
	<div align="center">
		
	</div>
    
<b>LINE 3</b>
        <br>

        <div class="panel">
        <p>Here go text</p>
	</div>
 
	<br>
	<p class="flip">Click here to Show/Hide Line 3</p>
 
	<br>
	<br>
	<div align="center">
		
	</div>

<b>LINE 4</b>
        <br>

        <div class="panel">
        <p>Here go text</p>
	</div>
 
	<br>
	<p class="flip">Click here to Show/Hide Line 4</p>
 
	<br>
	<br>
	<div align="center">
		
	</div>

[/code]