Quantcast
Channel: RaGEZONE - MMO Development Forums
Viewing all articles
Browse latest Browse all 33097

jQuery slide on seperate boxes.

$
0
0
Basically i'm making a forum but on my forum I want to have a function like the category boxes on here where you click on an arrow and it makes the category disappears, now that is all well and good as i've coded that fine but the problem is in my admin cp I want to be able to make a new category and slide that one up as well but whenever I do that it slides the category above it up
(Sorry if your confused, I had no idea how to word it)

Code:

<?php include 'includes/head.php'; ?>


<?php include 'includes/header.php'; ?>
    <!-- Main content box -->
    <div id="a_content_header">
    Announcements
    <img src="http://forum.ragezone.com/images/arrow.png" class="arrow">
    </div>
    <div id="a_main_content">
    This forum is newly opened please follow the rules
    </div>
    <div id="bottom_corners"></div>
    <!-- Main content box -->
   
   
    <!-- Category 1 -->
    <div id="p_content_header">
    Category
    <img src="http://forum.ragezone.com/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="http://forum.ragezone.com/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>
    <?php include 'includes/end.php'; ?>

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();
        });


});


Viewing all articles
Browse latest Browse all 33097

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>