Automatically creating javascript code

Question

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 piece of code that automatically creates a unique arrow and piece of JavaScript coding saying 'once the arrow is clicked the slide the box its in up'

Edit:
jsfiddle.net/UxJkA When you click on the second one the first one goes up and I know how to fix that by hand just by changing the classes but I want it too automatically change the classes of the arrow and box on each one.

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

     <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>

Your need a jsFiddle, really badly. And for future reference, you should narrow down your code as much as possible, I am sure you could take out some of you html. — dezman
– dezman, Commented Aug 11, 2013 at 19:15
Please explain it again with other word, I don't understand, Sorry. — user2635745
– user2635745, Commented Aug 11, 2013 at 19:16
Define: Box. Explain: Slide up (does it change anything beyond the admin user's current view in their window?). Also, why do you want unique code for each category, rather than generic code for all categories — Paul S.
– Paul S., Commented Aug 11, 2013 at 19:20
jsfiddle.net/UxJkA When you click on the second one the first one goes up and I know how to fix that by hand just by changing the classes but I want it too automatically change the classes of the arrow and box on each one. If that makes any more sense. — James Nixon
– James Nixon, Commented Aug 11, 2013 at 19:24

psg-1 · Accepted Answer · 2013-08-11 19:59:45Z

...I'm not really sure I understand your question, but here's a fiddle with my best guess: http://jsfiddle.net/BXzKC/

<div id="p_content_header">Category
<img src="images/arrow.png" class="arrow" data-content="first" />
</div>
<div class="content-container" data-content="first">
    <table> ... </table>
</div>
<div id="p_content_header">Category 2
    <img src="images/arrow.png" class="arrow" data-content="second" />
</div>
<div class="content-container" data-content="second">
    <table> ... </table>
</div>

So now each "box" has a common class plus some data attribute to identify it. Each arrow also has a common class and that same data attribute.

$(".content-container").show();
$('.arrow').click(function (e) {
    var cat = $(e.currentTarget).data('content');
    $('.content-container[data-content="' + cat + '"]').slideToggle();
});

So basically we're showing all the "boxes" at once in the first line; then, on the click of any arrow, we read that data stuff and use it to identify which box to expand/collapse.

You'll still have to come up with some values for that data yourself (name of the box? A simple count? You could also disregard all that and just grab the box that's right after the div that contains the arrow, or wrap them together or something), but that's a different issue.

Collectives™ on Stack Overflow

Automatically creating javascript code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related