Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Problem mit Accordion
#1
Photo 
Hi, ich habe von w3Schools das Beispiel auf meiner Webseite versucht zu implementieren: 
https://www.w3schools.com/howto/howto_js_accordion.asp

Leider funktioniert es nicht richtig und ich habe leider auch keine Ahnung warum.  Die p-tags lassen sich zwar öffnen und schließen. Aber es zeigt sich weder der Inhalt noch ist die Größe richtig. 
Kann mir da jemand Tipps geben?
Vielen Dank

   
Zitieren
#2
Hast du mal link zur Seite , weil so kann ich nicht sehen welche fehler du in der Konsole hast usw
Oder kopiere deinen Code bei https://codepen.io rein
Zitieren
#3
Hi, ich habe meinen Code mal auf das wesentliche reduziert. Im Mapwindow, also im mittleren Div funktioniert das Accordion mittlerweile... Wenn man auf den Buttons mit your bokkings klickt, erscheint ein Aside. Hier würde das Accordion auch funktionieren. Sobald ich aber mit js elemente manuell erzeuge, kommt es zu Fehlern. Wenn ich Text aus meiner Datenbank lade, dann sieht es so aus wie im Bild im ersten Beitrag. 

Ich habe für diesen post jetzt, den Teil zur Datenbankverbinding übersprungen, und stattdessen eine leere Php-datei verwendet <?php ?> und eine Liste als output verwendet. Jetzt funktioniert es einigermaßen, aber die pTags werden nicht in voller Größe und teilweise verdeckt angezeigt. Vorallem wenn man auf ein eigen creates klickt.
Danke für deine Hilfe

<!DOCTYPE html>
<html lang="en">
<head>

    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.css" />
    <script src="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.js"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">


   
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/95e77da10e.js" crossorigin="anonymous"></script>
     <script src="D:\xampp\htdocs\supertramp\jquery.js"></script>

     <script src="jquery.min.js"></script>
     <script src="jquery-ui.min.js"></script>
     <link rel="stylesheet" href="bootstrap.min.css">
     <script src="bootstrap.min.js"></script>
     
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <title>Document</title>
<link rel="stylesheet" href="css_ts.css">
    
<style>

    
    </style>


</head>
<body>
    <div class="container">
        <div class="nav">
            <div class="nav_left"><div class="nav_left"></div><i class="fas fa-hat-wizard"></i><div>TommySupertramp</div><div id="login_div"> Login <i class="fab fa-facebook-square"></i></div></div>
            <div class="nav_right">
                <button onclick="alert('Button Clicked')" class="btn_nav_right">Flight Dart</button>
                <button id="book" class="btn_nav_right">Your Bookings</button>
                <button id="your_trip" class="btn_nav_right">Your Trip</button>
                <button id="routes" class="btn_nav_right">routes</button>
                <button id="filter" class="btn_nav_right">filter</button>
            </div>
        </div>
        <div class="main_container">
            <div class="map_window">
                <h2>Accordion</h2>

                <button class="accordion">Section 1</button>
                <div class="panel">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                
                <button class="accordion">Section 2</button>
                <div class="panel">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                
                <button class="accordion">Section 3</button>
                <div class="panel">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
            <aside id="aside" class="aside">
               <!-- <h2>München</h2>
                <p>Information</p>
                <img src="https://cdn.pixabay.com/photo/2016/03/04/19/36/beach-1236581__340.jpg" alt=""-->
                
                <h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
                
               
            </aside>
        </div>
    </div>
    
    
    
   
      
    
     <!-- Modal 1 -->
     <div id="modal_filter" class="my-modal">
        <header class="handle">
            <button id="btn_close_filter" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="my-modal-title">Filter</h4>
        </header>
        <main>
            <div class="modal-body">
                <div class="ModalButtons">
                    <button style="color:yellow"  class="btn_nav_right "><i  class="fas fa-star"></i></button>
                    <button style="color:black" class="btn_nav_right"><i class="fas fa-city"></i></button>
                    <button style="color:green" class="btn_nav_right"><i class="fas fa-tree"></i></button>
                    <button style="color:black" class="btn_nav_right"><i class="fas fa-landmark"></i></button>
                </div>
                <div class="addMarkerModal">
                    <button class="btn_nav_right" id="addspot">add to</button>
                    <select name="" id="select_filter">
                       
                    </select>
                </div>
                <button  class="btn_nav_right"class="showMyMarkers">show only my list </button>
                <button id="createList_filter" class="btn_nav_right"class="createListModal">Create new </button>
                  </div>
        </main>
       
    </div>
    <!-- Modal 2 -->
    <div  id="modal_routes" id="my-modal-2" class="my-modal">
        <header class="handle">
            <button id="btn_close_routes"  class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="my-modal-title">Modal 2</h4>
        </header>
        <main>
            <div class="modal-body">
                <div >
                    <div class="modal-body"></div>    
                      <div class="ModalButtons">
                         
                      </div>
                     
                     <h2>Select</h2>
                            <div class="select_region">
                                <select name="" id="lists_cont">
                                    <option value="">select</option>
                                </select>
                                
                                <select style="visibility: hidden;"  name="" id="lists_reg_mac">
                                    <option value="">select</option>
                                   
                                </select>
                                <select style="visibility: hidden;" name="" id="lists_land">
                                    <option value="">select</option>
                                    
                                </select>
                                <select style="visibility: hidden;" name="" id="lists_reg_mic">
                                    <option value=""><select name="" id=""></select></option>
                                  
                                </select>
                            </div>
                            <div class="btns_aside_add">    
                                <button class=""> add to;</button>
                                <select name="" id="myLists">
                                    <option value="">select</option>
                                </select>
                            </div>
                           <button id="create_list">create list</button>
                            <div id="available_items" class="items">
                                
                                </div>
                              
                            </div>
            
                      
                        </div>
            </div>
        </main>
       
    </div>

    <div id="modal_your_trip" class="my-modal">
        <header class="handle">
            <button id="btn_close_your_trip"  class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="my-modal-title">Modal 3</h4>
        </header>
        <main>
            <div class="modal-body">
                <div class="ModalButtons">
                </div>
               <h2>plan your trip</h2>
                     
                      <div class="btns_aside_add">    
                          <button class=""> add to</button>
                          <select name="" id="myLists_your_trip">
                              <option value="">select</option>
                          </select>
                      </div>
                     <button id="create_list_your">create list</button>
                      <div  id="sortable" class="items ul_list">
                        
                          
                         
                      </div>
      
                
                  </div>
        </main>
       
    </div>
     


    </div>
    </div>
    
   

</body>



<script>

//declaration

    btn_route =document.getElementById("routes")
    place =document.getElementById("book")
    aside = document.querySelector("aside")
    map_window = document.querySelector("map_window")

    modal = document.getElementById("modal_filter")
    modal2 = document.getElementById("modal_routes")
    modal3 = document.getElementById("modal_your_trip")

    btn_close_filter = document.getElementById("btn_close_filter")
    btn_close2 = document.getElementById("btn_close_routes")
    btn_close3 = document.getElementById("btn_close_your_trip")

    var selects = document.querySelector('#lists_trips');


let selects_cont = document.getElementById("lists_cont");
let selects_region_macro = document.getElementById('lists_reg_mac');
let selects_land = document.getElementById('lists_land');
var selects_region_micro = document.getElementById('lists_reg_mic');


    

    // das folgende nur damit die Modale am Anfang nicht übereinander liegen:
const
    boundingRect = document.querySelectorAll('.my-modal')[0]
        .getBoundingClientRect(),
    hModal = boundingRect.height;
document.querySelectorAll('.my-modal')[1].style.top = hModal + 'px';

btn1 = document.getElementById("filter")
btn2 = document.getElementById("routes")
btn3 = document.getElementById("your_trip")

const myLists = document.getElementById("myLists");
const myLists_your_trip = document.getElementById("myLists_your_trip");
const myLists_your_trip_filter = document.getElementById("select_filter");



//script

simpleDraggable('.my-modal', '.handle');

    //aside sichtbar machen und mapwindow verkleinern
place.addEventListener("click",function(){
       aside.classList.remove("aside")
       aside.classList.add("aside_active")

       map_window.classList.remove("map_window_active")
       map_window.classList.add("map_window")
       
    })

//Modale am anfang verstecken

hideModalsBeg(modal)
hideModalsBeg(modal2)
hideModalsBeg(modal3)
    

    //Modale erscheinen lassen
    


btn1.addEventListener("click",function(){
    showModals(modal)
})
btn2.addEventListener("click",function(){
    showModals(modal2)
})
btn3.addEventListener("click",function(){
    showModals(modal3)
})

btnClose(btn_close_filter,modal);
btnClose(btn_close2,modal2);
btnClose(btn_close3,modal3);

document.getElementById("create_list").addEventListener("click", function () {

//musst das nicht auch uploadNew_your sein?
window.open("http://localhost/supertramp/uploadNew.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");

});

document.getElementById("create_list_your").addEventListener("click", function () {


window.open("http://localhost/supertramp/uploadNew_your.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");

});

document.getElementById("createList_filter").addEventListener("click", function () {


window.open("http://localhost/supertramp/uploadNew_your.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");

});

  getContentFromPHP(1,'loadListNames_your.php',parseObject,createLists_your_trips)

  getContentFromPHP(1,'loadConts.php',parseObject,CreateSelectContinent)

  document.getElementById("myLists_your_trip").addEventListener('change', function () {
    getContentFromPHP("Poland-trip",'items_aus_db_laden2_yours.php',null,CreateDraggableItems)
  })

  getContentFromPHP(1,'cutterx2x.php',parseObject,CreateAccordionAside);

//functions
function simpleDraggable(elementSelector, handleSelector) {
    const elements = document.querySelectorAll(elementSelector);
    if (elements.length === 0) {
        throw Error(`Elements matching selector ${elementSelector} not found`);
    }

    const getCursorPositionFromEvent = (e) => {
        if (e.touches && e.touches.length > 0) {
            return {
                x: e.touches[0].clientX,
                y: e.touches[0].clientY,
            };
        } else {
            return {
                x: e.clientX,
                y: e.clientY,
            };
        }
    };

    for (let element of elements) {
        let handle;
        if (handleSelector) {
            handle = element.querySelector(handleSelector);
        }

        element.style.position = 'absolute';

        let cursorPositionX = 0;
        let cursorPositionY = 0;

        const start = (e) => {
            e.preventDefault();

            // get initial cursor position
            const cursorPosition = getCursorPositionFromEvent(e);
            cursorPositionX = cursorPosition.x;
            cursorPositionY = cursorPosition.y;

            document.addEventListener('mousemove', dragging);
            document.addEventListener('touchmove', dragging);

            document.addEventListener('mouseup', stop);
            document.addEventListener('touchend', stop);
            document.addEventListener('touchcancel', stop);
        };

        const dragging = (e) => {
            e.preventDefault();

            // get new cursor position
            const cursorPosition = getCursorPositionFromEvent(e);

            // calculate position change
            const positionChangeX = cursorPositionX - cursorPosition.x;
            const positionChangeY = cursorPositionY - cursorPosition.y;

            // save new cursor position
            cursorPositionX = cursorPosition.x;
            cursorPositionY = cursorPosition.y;

            // set the element's new position:
            element.style.left = `${element.offsetLeft - positionChangeX}px`;
            element.style.top = `${element.offsetTop - positionChangeY}px`;
        };

        const stop = () => {
            document.removeEventListener('mousemove', dragging);
            document.removeEventListener('touchmove', dragging);

            document.removeEventListener('mouseup', stop);
            document.removeEventListener('touchend', stop);
            document.removeEventListener('touchcancel', stop);
        };

        if (handleSelector && handle) {
            handle.addEventListener('mousedown', start);
            handle.addEventListener('touchstart', start);
        } else {
            element.addEventListener('mousedown', start);
            element.addEventListener('touchstart', start);
        }
    }
}



function hideModalsBeg(modal){
    modal.classList.remove("my-modal")
    modal.classList.add("my-modal-hide")
}

function showModals(modal){
    modal.classList.remove("my-modal-hide")
    modal.classList.add("my-modal")
}



function getContentFromPHP(param1,php_function,function1,function2,param2,param3){
    const params = new FormData();
    if(param1){
        params.append('post_var1', param1);
    }
    if(param2){
        params.append('post_var2', param2);
    }
     
    if(param3){
        params.append('post_var3', param3);
    }
        
        fetch(php_function, {
            method: 'post',
            body: params
        }).then(res => {
            return res.text();
        }).then(res => {
            
            output = res;
            if(function1){
            if (typeof(output) == "string"){
                //parse json
                output = function1(output)
            }
        }
          if(function2){
                function2(output)
            }
        })
        
}

function parseObject(object){
    let output = JSON.parse(object);
    return output
}

function createLists_your_trips(list_names_your){
    let Listelements = [];
            for (let x = 0; x < list_names_your.name.length; x++) {
                Listelements.push(list_names_your.name[x].name)
            }
             //Listelements = ["List A","List C"];
           
            Listelements.forEach(getListOptions1)
            Listelements.forEach(getListOptions_routes1)
        
}


function getListOptions1(item,index){
        option = document.createElement("option");
        option.innerText = item;
        myLists.appendChild(option)

        option_your = document.createElement("option");
        option_your.innerText = item;
        myLists_your_trip.appendChild(option_your)

        option_filter = document.createElement("option");
        option_filter.innerText = item;
        myLists_your_trip_filter.appendChild(option_filter)
        myLists.appendChild(option)
      
        }

        function getListOptions_routes1(item,index){
        option = document.createElement("option");
        option.innerText = item;
        
        }

        function btnClose(button,modalObj) {
    button.addEventListener("click",function(){
        modalObj.classList.remove("my-modal")
        modalObj.classList.add("my-modal-hide")
    })
}


function CreateSelectContinent(output){
    list_continents = output;
    for (let x = 0; x < list_continents.continents.length; x++) {
            let option_continent = document.createElement('option');
            let tempNode_Continent =
                document.createTextNode(list_continents.continents[x].name);
            option_continent.appendChild(tempNode_Continent);
            option_continent.id = x;
            


            selects_cont.appendChild(option_continent);

            selects_cont.addEventListener('change', function () {
            document.getElementById('lists_reg_mac').style.visibility = "visible"
            document.getElementById('lists_reg_mac').innerHTML = '<select name="" id="lists_cont"><option>select</option></select>';
            
            for (let x = 0; x < this.length; x++) {
   
                    if (this[x].value == this.value) {

                        id_cont = this[x].id;}
                        
                    }
                    
            getContentFromPHP(id_cont,'loadTerritories.php',parseObject,CreateSelectTerritories);
            
            })
            
        }
}

function CreateSelectTerritories(output){
    document.getElementById('lists_reg_mac').innerHTML = '<select name="" id="lists_cont"><option>select</option></select>';
    list_territories = output;
    for (let x = 0; x < list_territories.territories.length; x++) {
                                   
                                   let optionC = document.createElement('option');
                                   
                                   let tempNodeC =
                                       document.createTextNode(list_territories.territories[x].name);
                                   optionC.appendChild(tempNodeC);
                                   optionC.id = x;
                                   
                                   document.getElementById('lists_reg_mac').appendChild(optionC)

                                   document.getElementById('lists_reg_mac').addEventListener('change', function () {
                                selects_land.style.visibility = "visible";
                            selects_land.innerHTML = '<select name="" id="lists_land"><option>select</option></select>';


                            for (let x = 0; x < this.length; x++) {
                    if (this[x].value == this.value) {
                        
                        let name_territory = this.value;
                        id_reg_mac = this[x].value;

                    }}
                    getContentFromPHP(id_reg_mac,'loadCountries.php',parseObject,CreateSelectCountries);
                                   })
                                   
                            
                           }
}


function CreateSelectCountries(output){
    selects_land.innerHTML = '<select name="" id="lists_land"><option>select</option></select>';
    list_countries = output;
                            for (let x = 0; x < list_countries.countries.length; x++) {
                                   
                                   let optionC = document.createElement('option');
                                   
                                   let tempNodeC =
                                       document.createTextNode(list_countries.countries[x].name);
                                   optionC.appendChild(tempNodeC);
                                   optionC.id = x;
                                   
                                   document.getElementById('lists_land').appendChild(optionC)
                            }
                            
                            document.getElementById('lists_land').addEventListener('change', function () {
                                selects_region_micro.style.visibility = "visible"; 
                                selects_region_micro.innerHTML = '<select name="" id="lists_reg_mic"><option>select</option></select>';
                                
                                for (let x = 0; x < this.length; x++) {
                                    
                    if (this[x].value == this.value) {
                     
                       let name_states = this[x].value
                      
                        id_micro = this[x].id;
                        
                    }
                }
                getContentFromPHP(id_micro,'loadStates.php',parseObject,CreateSelectStates);
            })
          
                            
}

function CreateSelectStates(output){
    list_states = output;
    selects_region_micro.innerHTML = '<select name="" id="lists_reg_mic"><option>select</option></select>';
                            for (let x = 0; x < list_states.states.length; x++) {
                                                                                   
                                                                                    let optionF = document.createElement('option');
                                                                                    
                                                                                    let tempNodeF =
                                                                                        document.createTextNode(list_states.states[x].name);
                                                                                    optionF.appendChild(tempNodeF);
                                                                                    optionF.id = x;
                                                                                    

                                                                                    selects_region_micro.appendChild(optionF);

                                                                                }
                                                                                
    document.getElementById('lists_reg_mic').addEventListener('change', function () {
        getContentFromPHP("Poland-trip",'items_aus_db_laden2.php',null,CreateUnDraggableList);
    })
    
    

}

function CreateUnDraggableList(output){
    console.log(output)
        list_stops = output
        console.log(list_stops)
        list_stops = JSON.parse(list_stops);
        text = JSON.stringify(list_stops.days)
        text =text.replace("]", "");
        text =text.replace("[", "");
        text =text.replace("\"", "");
        text =text.replace("\"", "");
        days_array = text.split(",")
        
        
        
        let div_grandpar = document.getElementById("available_items");
         div_grandpar.innerHTML = '<div id="available_items" class="items">';
            for (let x = 0; x < list_stops.list_stops.length; x++) {
                                   
                                   let div = document.createElement('div');
                                   div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text" readonly></span>';
                                   
                                   div.classList.add("icons_your_trip");
                                    div.children[0].children[1].value = days_array[x];
                                   
                                   let div_par1 = document.createElement("div")
                                   
                                   div_par1.innerText = list_stops.list_stops[x]
                                   div_par1.classList.add("town_name_your_trip")
                                   div_par1.appendChild(div)
                                   
                                   let div_par2 = document.createElement("div");
                                   div_par2.classList.add("available_trip_list")
                                   div_par2.appendChild(div_par1)
                                   div_grandpar.appendChild(div_par2)
                                 
                                   
                                   /*let tempNodeC =
                                       document.createTextNode(list_territories.territories[x].name);
                                   optionC.appendChild(tempNodeC);
                                   optionC.id = x;
                                   
                                   document.getElementById('lists_reg_mac').appendChild(optionC)
                            */
                           }
}

function CreateDraggableItems(output){
 
    list_stops = output
    console.log(list_stops)
        list_stops = JSON.parse(list_stops);
        text = JSON.stringify(list_stops.days)
        console.log(text)
        text =text.replace("]", "");
        text =text.replace("[", "");
        text =text.replace("\"", "");
        text =text.replace("\"", "");
        days_array = text.split(",")
        console.log(days_array)
        
        
        
        let div_grandpar_your = document.getElementById("sortable");
         //div_grandpar_your.innerHTML = '<div id="sortable" class="items ul_list">';
            for (let x = 0; x < list_stops.list_stops.length; x++) {
                                   

            
                                   let div = document.createElement('div');
                                   i_icon_town = document.createElement('i')
                                   i_icon_town.classList.add('fas');
                                   i_icon_town.classList.add('fa-city');
                                   input = document.createElement('input');
                                     
                                   placeHolder_input = "-";
                input.setAttribute("placeholder", placeHolder_input);
                input.setAttribute("size", 1)
                input.addEventListener("keyup", function () {
                  console.log(select_text)
                  console.log(this.value)
                  console.log(this.parentElement.parentElement.id)
                     getContentFromPHP(this.parentElement.parentElement.id,'updateDay.php',null,null,this.value,select_text);
                })
                i_icon_trash = document.createElement('i')
                                   i_icon_trash.classList.add('fa');
                                   i_icon_trash.classList.add('fa-trash');
                                   span = document.createElement('span');
                                   span.appendChild(i_icon_town);
                                   span.appendChild(input);
                                   span.appendChild(i_icon_trash);
                                    div.appendChild(span)
                                   //div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text"><i class="fa fa-trash"></i></span>';
                                 
                                 
                div.classList.add("icons_your_trip");
                                   div.setAttribute("id", x);
                                   console.log(div)
                                    div.children[0].children[1].value = days_array[x];
                                   
                                   let div_par1 = document.createElement("div")
                                   
                                   div_par1.innerText = list_stops.list_stops[x]
                                   div_par1.classList.add("town_name_your_trip")
                                   div_par1.appendChild(div)
                                   
                                   let div_par2 = document.createElement("div");
                                   div_par2.classList.add("ui-state-default")
                                   div_par2.classList.add("available_trip_list")
                                   div_par2.classList.add("linkList")
                                   div_par2.appendChild(div_par1)
                                   div_par2.setAttribute("id", x);
                                   div_grandpar_your.appendChild(div_par2)
                                   

                                   select_text = "Poland-trip";
                                   trashes = document.querySelectorAll(".fa-trash");
                                   
                                   
                                   trashes[x].addEventListener("click", removeElement);

                                    /*let tempNodeC =
                                       document.createTextNode(list_territories.territories[x].name);
                                   optionC.appendChild(tempNodeC);
                                   optionC.id = x;
                                   
                                   document.getElementById('lists_reg_mac').appendChild(optionC)
                            */
                           

                               id = x;

                             //  //getContentFromPHP("Poland-trip",'loadDay.php',parseObject,loadday?);
           
           //loadDay(input.parentElement.id,value_select)
        
           //select_text = value_select;
            }
}


$(function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});

function removeElement(name_post) {
    element_delete = this.parentElement.parentElement.parentElement;
    
    element_clicked_id = this.parentElement.parentElement.id;
    element_delete.remove();
    name_post = "Poland-trip"; 
    //name_post = document.getElementById(myLists_your_trip).selectedIndex;
    
    php_removedElementId(element_clicked_id, name_post);
}

function php_removedElementId(val, name) {
    alert(val)

    const url = 'http://localhost/supertramp/deleteElementLi.php';

    const params = new FormData();
    params.append('post_var1', val);
    params.append('post_var2', name);

    fetch('deleteElementLi.php', {
        method: 'post',
        body: params
    }).then(res => {
        outputB= "";
        return res.text();
    }).then(res => {
    
        //outputB.innerHTML= res;
    });

}

$(function () {
                $("#sortable").sortable({
                    stop: (event, ui) => {
                      
                        moved_id = ui.item.attr('id');


                        next_id = ui.item.next().attr('id');
                       
                        links = document.querySelectorAll(".linkList");
                       

                        if (typeof next_id == "undefined") {
                          
                            ui.item.attr("id", links.length - 1);
                            for (let x = 0; x < links.length - 1; x++) {
                               
                                links[x].id = x;
                            }
                        }
                        else if (next_id == 0) {
                            for (let x = 0; x < links.length; x++) {
                           
                                links[x].id = x;
                            }
                        }
                        else {
                            
                            ui.item.attr("id", next_id - 1);
                          

                            for (let x = parseInt(moved_id); x < parseInt(next_id) - 1; x++) {
                             
                                links[x].id = x;
                            }
                        }
                        php_changeListorder(moved_id, next_id);
                    }
                });
                $("#sortable").disableSelection();
            });
            

            function php_changeListorder(moved_id,next_id,name){
                name = "Poland-trip";
                getContentFromPHP(moved_id,'changeListOrder.php',null,null,next_id,name);
                getContentFromPHP(moved_id,'changeDayOrder.php',null,null,next_id,name);
            }

            function showlog(output){
                console.log(output)
            }

            function CreateAccordionAside(output){
                contentAcc = output;
                console.log(output)
                for (let x in output){
           buttonAcc = document.createElement("button")
           buttonAcc.classList.add("accordion")
           
           buttonAcc.innerText = x;

            let textP = document.createElement("p")
            content = "";
            for (y in output[x]){
                content = content + output[x];
            }
            
            textP.innerText = content
            let div = document.createElement("div")
            div.classList.add("panel")
            div.appendChild(textP)

           document.getElementById("aside").appendChild(buttonAcc)
           document.getElementById("aside").appendChild(div)
           
            }
           var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
        }



</script>




<script>
   
    </script>

als Ergänzung noch die css:

  .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  .active, .accordion:hover {
    background-color: #ccc; 
  }
  
  .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
  }

  *{
    margin: 0;
    padding: 0;
}
.nav{
    border-bottom: blue;
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center ;
    justify-content: space-between;
    padding-top: 10px;
}
.nav_left{
    display: flex;
    flex-direction: row;
    align-items: center ;
    margin-left: 10px;
}
.btn_nav_right{
    border-radius: 5px;
    
}

.btn_right{
    border-radius: 5px;
    border: solid black 1px;
    width: 150px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}
.map_window{
    width: 95%;
    height: 100vh;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}
.map_window_active{
    width: 70%;
    height: 100vh;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}

.main_container{
display: flex;
flex-direction: row;
}

.select_region{
display: flex;
flex-direction: column;
}


.aside{
    display: none;
    height: 30%;
    width: 100%;
    background-color: whitesmoke;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: solid black 1px;
}
.aside_active{
    display: flex;
    height: 100vh;
    width: 30%;
    background-color: whitesmoke;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: solid black 1px;
    flex-direction: column;
    align-items: flex-start;
    


}

.backgroundClickable{
width: 300px;
height: 300px;
background-color: brown;
}

.modal-dialog2 input{
width: 20px;
}

.modal-dialog3 input{
width: 20px;
}

.items{
border-radius: 5px;
border: solid black 2px
}

.item btn_right{
width: 200px;
}

.item btn_right2{
width: 240px;
}

.your_trip_list{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: solid black 1px;
border-radius: 5px;
}

.available_trip_list{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: solid black 1px;
border-radius: 5px;
}


.routes_modal_select{
width: 150px;
}

.aside_active input{
width: 20px;
}

aside img{
width: 90%;
height: 200px;
text-align: center;
margin: 10px 10px 10px 10px;
}

#login_div{
margin-left: 10px;
}

.my-modal {
    display: inline-block;
    min-width: 150px;
    border: 2px solid lightgray;
    border-radius: 0.5rem;
    background-color: white;
}

.my-modal-hide{
display: none;
}



@media screen and (max-width: 400px) {

.nav{
    border-bottom: blue;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center ;
    justify-content: space-between;
    padding-top: 10px;
}
.main_container{
display: flex;
flex-direction: column;
}

.aside{
    display: none;
    height: 30%;
    width: 100%;
    background-color: whitesmoke;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: solid black 1px;
}
.aside_active{
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: whitesmoke;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: solid black 1px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;


}
.map_window_active{
    width: 100%;
    height: 400px;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}
.map_window{
    width: 95%;
    height: 100vh;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}

}

@media screen and (max-width: 330px) {

.main_container{
display: flex;
flex-direction: column;
}

.nav_right{
display: flex;
flex-direction: column;
}

.aside{
    display: none;
    height: 30%;
    width: 100%;
    background-color: red;
    margin-left: 10px;
    margin-top: 10px;
}
.aside_active{
    display: active;
    height: 200px;
    width: 100%;
    background-color: red;
    margin-left: 10px;
    margin-top: 10px;
}
.map_window_active{
    width: 100%;
    height: 400px;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}
.map_window{
    width: 95%;
    height: 100vh;
    background-color: cadetblue;
    margin-left: 10px;
    margin-top: 10px;
}

.yellow{
    background-color: yellow;
}

}
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste