Sonel ID EN

To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu. Kliknij dwa razy, aby edytować

<head> <meta charset="utf-8"> <title>Accordion</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="robots" content="index, follow" /> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" type="text/css" href="style.css" /> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="script/accordion.js"></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script> $(document).ready(function() { $(".toggle-accordion").on("click", function() { var accordionId = $(this).attr("accordion-id"), numPanelOpen = $(accordionId + ' .collapse.in').length; $(this).toggleClass("active"); if (numPanelOpen == 0) { openAllPanels(accordionId); } else { closeAllPanels(accordionId); } }) openAllPanels = function(aId) { console.log("setAllPanelOpen"); $(aId + ' .panel-collapse:not(".in")').collapse('show'); } closeAllPanels = function(aId) { console.log("setAllPanelclose"); $(aId + ' .panel-collapse.in').collapse('hide'); } }); </script> <style> * { padding: 0; margin: 0; } html, body { font-family: Tahoma, sans-serif; font-weight: 300; width: 100%; font-size: 15px; color: #000000; margin: 0 auto; background-color: #FFFFFF; } a {outline: none; text-decoration: none; color: #000000;} a:hover {text-decoration: underline; color: #000000;} .page { margin: 0 auto; } img{ border: 0px; } .panel-default>.panel-heading { color: #FFF; background-color: #25335c !important; border:0px solid #25335c !important; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel.panel-default { border:0px solid #25335c !important; } .panel-body { color: #FFF; background-color: #25335c !important; border-top: 0px !important; } .panel-title { font-size: 20px !important; } .panel-default>.panel-heading a { display: block; background-color: #25335c !important; color: #FFF; padding: 10px 15px; } .panel-default>.panel-heading a:after { content: ""; color: #FFF !important; background-color: #25335c !important; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\2212"; color: #FFF !important; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\002b"; color: #FFF !important; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .accordion-option { width: 100%; float: left; clear: both; margin: 15px 0; color: #FFF !important; } .accordion-option .title { font-size: 20px; font-weight: bold; float: left; padding: 0; margin: 0; color: #FFF !important; } .accordion-option .toggle-accordion { float: right; font-size: 16px; color: #FFF !important; } @media only screen and (max-width: 800px) { img.sid { width:7% !important; } } </style> <body> <div class="page"> <div class="accordion-option"> <a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a> </div> <div class="clearfix"></div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> How to create a Sonel ID account? </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> You can set up a Sonel ID using any email address. All you need to do is enter your mail address and set a password. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> How to log in to SONEL services when you already have a Sonel ID account? </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> On a site that allows you to log in with Sonel ID, you will see an icon <img class="sid" src="https://us-ms.gr-cdn.com/getresponse-QZ5sB/photos/0a72df49-dec5-435e-bf93-68c9761460fb.png" alt="ID" width="2%"> "Log in with Sonel ID" in the upper right corner of the page. Their appearance may vary slightly from site to site. When you want to log in, just click it and use your existing login information. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> How do you know if you are logged in with Sonel ID in any of the SONEL services? </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> In the upper right corner of the page you will find an icon <img class="sid" src="https://us-ms.gr-cdn.com/getresponse-QZ5sB/photos/0a72df49-dec5-435e-bf93-68c9761460fb.png" alt="ID" width="2%"> and a link to the Customer Panel and Logout. </div> </div> </div> </div> </div> </body>