Create expand/collapse DD element before all the other DDs instead of being last

I followed this tutorial on how to create an expand/collapse categories "icon" which creates a DD element, and since it creates the DD last after all, it looks like this: (creating DD in the corner right)

Instead, I wanted to create the DD element or somehow set the position such as like it was the first DD element, which then it'd come before the category name and look like this:


Tutorial mentioned (which was the response to someone's request for help with expand/collapse system for categories)

كونان2000 wrote:This is the JAVASCRIPT code

Code:


        $(function() {
            if (_userdata.page_desktop)
                return;
            var a = $('.forabg'), i = 0, j = a.length, button, list, dd;
            for (; i < j; i++) {
                list = a[i].getElementsByTagName('UL');
                button = document.createElement('A');
                dd = document.createElement('DD');
                button.innerHTML = '';
                button.href = '#';
                button.className = 'fa fa_toggle';
                button.id = 'fa_toggle-' + i;
                list[1].id = 'fa_catg-' + i;
                if (my_getcookie('fa_catg-' + i) == 'hidden') {
                    button.innerHTML = '';
                    list[1].style.display = 'none'
                }
                button.onclick = function() {
                    var id = this.id.replace(/.*?(\d+)/, '$1')
                      , catg = document.getElementById('fa_catg-' + id);
                    if (/none/.test(catg.style.display)) {
                        this.innerHTML = '';
                        catg.style.display = 'block';
                        my_setcookie('fa_catg-' + id, 'shown')
                    } else {
                        this.innerHTML = '';
                        catg.style.display = 'none';
                        my_setcookie('fa_catg-' + id, 'hidden')
                    }
                    return false
                }
                ;
                dd.appendChild(button);
                list[0].firstChild.firstChild.appendChild(dd)
            }
            'par ange tuteur'
        });


2
Find the next part in index_box template

Code:

<ul class="linklist">

replace it with

Code:

            <style>
         
            a.fa_toggle {
            border: solid #b1a8ab 1px;
            text-align: center;
            background: #0000007d;
            width: 15px;
        }
        a:visited {
            color: #f1f2f3;
            text-decoration: none;
        }
       
        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
            </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <ul class="linklist">


Hi,


Please follow the steps shown below to achieve this.

Replace the code you inserted in the template with this:

Code:

    <style>
 
  a.fa_toggle {
    border: solid #b1a8ab 1px;
    text-align: center;
    background: #fff;
    width: 20px;
    margin-left: -1774px;
}
a:visited {
    text-decoration: none;
}
 
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
      h2 {
      margin-left: 46px !important;
      }
    </style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="linklist">

Preview: https://sirchivastest.forumotion.com/

Sir Chivas wrote:Hi,


Please follow the steps shown below to achieve this.

Replace the code you inserted in the template with this:

Code:

    <style>
 
  a.fa_toggle {
    border: solid #b1a8ab 1px;
    text-align: center;
    background: #fff;
    width: 20px;
    margin-left: -1774px;
}
a:visited {
    text-decoration: none;
}
 
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
      h2 {
      margin-left: 46px !important;
      }
    </style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="linklist">

Preview: https://sirchivastest.forumotion.com/

Thanks, partially worked. on your forum and mine when a.fa_toggle margin-left is 1774px I have to do several zoom outs to see it on screen and not really in the left, it worked with -940px for me, which makes me wonder if perhaps margins aren't the best way to handle this to keep it responsive? But I really dont know any other way, most of the times I see something responsive and simple it uses tables, but I don't think it'd work or how would I be able to try it that way with this. Do you know any alternative way to keep it position responsive according to screen size?

As I figured much, I need to get a smaller screen.



The position: static property prevents left from having an effect. Only way I forced it to move. It's due to the script, but I got 0 knowledge there. Let me play around with it more.

Sir Chivas wrote:As I figured much, I need to get a smaller screen.



The position: static property prevents left from having an effect. Only way I forced it to move. It's due to the script, but I got 0 knowledge there. Let me play around with it more.

Thanks, oddly enough I used margins for the embedded login below navigation links, and if you zoom in/out, it barely messes up, only "Log in automatically : " but it's not really by a lot the difference. I really don't get how it's affecting in this case so badly.

For me it actually cuts off and shows the toggle in the middle.

Sir Chivas wrote:For me it actually cuts off and shows the toggle in the middle.

Oh my.. I was guessing everything with 'Inspector elements' from the web browser to keep changing CSS fast and experiment, turns out I found a way, instead of using margin-left, I set margin to auto, left property to 25px (which we weren't using) along with position property to absolute. Yay! Thanks for the help, I was stuck without changing the position at all before you suggested me your changes so you helped a lot

Ah! There you go, two heads are better than one after all. I'm glad I could be some sort of assistance.