Automatically creating javascript code
Sorry if you don't understand what I need help with its very hard to say.
I am basically coding a forum system, in my forum system I want admins to
be able to make a new category through the control panel, however the
issue with this is that on each category I want to have arrows which slide
the box up but how would I be able to add a peice of code that
automatically creates a unique arrow and peice of javascript coding saying
'once the arrow is clicked the slide the box its in up'
(Sorry if you don't understand)
Javascript code
$(document).ready(function(){
$("#a_main_content").show();
$('.arrow').click(function () {
$("#a_main_content").slideToggle();
});
$("#p_main_content").show();
$('.p_arrow').click(function () {
$("#p_main_content").slideToggle();
});
});
HTML code
<!Doctype>
<html>
<head>
<!-- <link type="text/css" href="style/style.css" rel="stylesheet" /> -->
<link rel="stylesheet" type="text/css" href="style/style.css?1376248413" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery/jQueryRotate.js"></script>
<script src="jquery/Box_Toggle.js"></script>
</head>
<body>
<div id="main_header">
<div id="main_header_wrapper">
<img src="images/logo.png" alt="Chattrd"/>
<nav id="navigation"><b>
<a href="index.php" class="nav_icon">Home</a>
<a href="#" class="nav_icon">Forum</a>
<a href="login.php" class="nav_icon">Login</a>
<a href="#" class="nav_icon">Register</a>
</b></nav>
</div>
</div>
<div id="content_background">
<!-- Main content box -->
<div id="a_content_header">
Announcements
<img src="images/arrow.png" class="arrow">
</div>
<div id="a_main_content">
This forum is newly opened please follow the rules<br />
<img src="http://www.logomaker.com/logo-images/f45ffac647d53394.gif"/>
<a href="http://www.logomaker.com"><img
src="http://www.logomaker.com/images/logos.gif" alt="logo design"
border="0"/></a>
</div>
<div id="bottom_corners"></div>
<!-- Main content box -->
<!-- Category 1 -->
<div id="p_content_header">
Category
<img src="images/arrow.png" class="p_arrow">
</div>
<div id="p_main_content">
<table>
<tr>
<td class="forum_name_header" style="width:240px;">Forum Name</td>
<td class="forum_name_header" style="width: 300px;">Last Post</td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James first forum<br />
<i style="color: #a3a3a3;">Topics: 858,
Messages: 8,485</i></td>
<td style="width: 300px;" class="forum_name">Test 1<br />
by <b style="color: red;">Admin</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434,
Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 2<br />
by <b style="color: blue;">Mod</b></td>
</tr>
</table>
</div>
<div id="bottom_corners"></div>
<!-- Category 1 -->
<!-- Category 2 -->
<div id="p_content_header">
Category 2
<img src="images/arrow.png" class="p_arrow">
</div>
<div id="p_main_content">
<table>
<tr>
<td class="forum_name_header" style="width:240px;">Forum Name</td>
<td class="forum_name_header" style="width: 300px;">Last Post</td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James first forum<br />
<i style="color: #a3a3a3;">Topics: 858,
Messages: 8,485</i></td>
<td style="width: 300px;" class="forum_name">Test 3<br />
by <b style="color: green;">Donator</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434,
Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 4<br />
by <b style="color: grey;">Registerd
User</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434,
Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 5<br />
by <b style="color: #333;"><strike>Banned
user</strike></b></td>
</tr>
</table>
</div>
<div id="bottom_corners"></div>
<!-- Category 2 -->
</div>
</div>
</body>
</html>
No comments:
Post a Comment