Html+Css+Js

What most 80% of sites use! <> script symbol is used to share. Skip jquery codes. Jquery dont work. All of mine are tested in Jimdo.com & w3schools html editor online. ftr.fivefilters.org & feeder.co great for finding new feeds. theoldreader for safekeeping & compatible w/mobiroller. wikihow.com/Set-Background-Color-in-HTML?amp=1 Copy/paste 1 at a time or preferrably bbcode style, type
[ code ] paste html [ /code ]
Example:

Code:

<h3>FAQs</h3>

<p class="accordion">Q1. What currency is the course charged in?</p>
<div class="panel">A. The course is charged in Australian dollars.</div>

<p class="accordion">Q2. What if the course doesn’t help me?</p>
<div class="panel">A. If it doesn't help you I'll refund the purchase price in full.</div>

<p class="accordion">Q3. When will the webinars take place?</p>
<div class="panel">A. Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly.</div>

<p class="accordion">Q4. What is the self-directed mentoring program?</p>
<div class="panel">A. The <style>
/* Style the element that is used to open and close the accordion class */
p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:10px;
}

/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
    background-color: #ddd;
}

/* Unicode character for "plus" sign (+) */
p.accordion:after {
    content: '\2795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
    content: "\2796";
}

/* Style the element that is used for the panel class */

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
</style> // this one toggles only one open at a time
// Ref  - http://stackoverflow.com/questions/37745154/only-open-one-accordion-tab-at-one-time
<script>
document.addEventListener("DOMContentLoaded", function(event) {


var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var setClasses = !this.classList.contains('active');
        setClass(acc, 'active', 'remove');
        setClass(panel, 'show', 'remove');

        if (setClasses) {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        }
    }
}

function setClass(els, className, fnName) {
    for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
    }
}

});
</script>  

 Spoiler code:

Code:

<style type="text/css">
.spoilerbutton {display:block; border:none; padding: 0px 0px; margin:10px 0px; font-size:150%; font-weight: bold; color:#000000; background-color:transparent; outline:0;
}
.spoiler {overflow:hidden;}
.spoiler > div {-webkit-transition: all 0s ease;-moz-transition: margin 0s ease;-o-transition: all 0s ease;transition: margin 0s ease;}
.spoilerbutton[value="i-T.Jimdo.com"] + .spoiler > div {margin-top:-500%;}
.spoilerbutton[value="hide showsolution"] + .spoiler {padding:5px;}
</style>
<input class="spoilerbutton" type="button" value="i-T.Jimdo.com" onclick="this.value=this.value=='i-T.Jimdo.com'?'Tienda:H.T.-T.Serie.ld:indeed.com Mmos:Aurcus.Gallery:ElementalForcesofMidsentra.Blog:Forumotion.com Health:Garlic,Blueberry,almond water.Videos:7Mxg.Entretenimiento:Botlibre.com. Html:w3schools.com/bootstrap-bootstrap_collapse.asp Divinemagic:Tarot Premium.':'i-T Jimdo.com';">
<div class="spoiler"><div>

<p>  </p>
<p>  </p>
<!--text here
<!--img style=" margin: 30px auto; display: block;" height="Auto" width = "Auto" src="IMAGE URL"-->

</div></div>

youtube videos(full screen doesn't work in all sites.channels only from an auto generated one like socialkit.com):

Code:

<iframe width="100-560" height="100-315" src="https://www.youtube.com/embed/playlist?list=PLTjHxCDAsVyyGm_lD-m2vMSfYqw1K8_z9" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

Audio version(needs a background play on standby perhaps):

Code:

<div data-video="video_id" data-autoplay="0" data-loop="1" id="youtube-audio"> </div> <script src="https://www.youtube.com/iframe_api"></script> <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

i-T.Jimdo Search|Buscador:

Code:

https://cse.google.com/cse?cx=011605825675913377406:j3vy5rvcvxa

Bandcamp Playlists(These use .wav or .flac, have play/stop, unlike soundcloud & most others)

Code:

<embed name="music_playlist"
src="https://7mxg.bandcamp.com/album/"
width="150"
height="90"
loop="false"
autostart="false">
</embed>

Youtube:

Code:

<form action="https://www.youtube.com/results" method="get" target="_blank" >
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>

Redirecting:

Code:

<meta http-equiv="Refresh" content="0; url='https://i-t.jimdo.com/misc'">  

Map:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="div1"><iframe class="cc-map-embed-iframe" width="100%" height="400" frameborder="0" style="border: 0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBs_lAfpuIjfx7DGisR7oUh1ZZ_C5qtGKc&amp;q=+&amp;zoom=1&amp;maptype=roadmap" allowfullscreen="true">
        </iframe></div>
<br>

</body>
</html>

Socialkit version:

Code:

<iframe id="live-preview" src="https://www.sociablekit.com/app/embed/index.php?embed_id=43250" frameborder="0" width="70%" height="50" allow="autoplay; encrypted-media" allowfullscreen> ></iframe>

Trulia search:

Code:

<div id="size_box" class="tru_det tru_size box_display_block">
<p class="tru_head tru_size" style="color:#769329;">SQ. FT.</p>
<select name="min_size" class="tru_size">
<option value="0">Any</option>
<option value="250">250+</option>
<option value="500">500+</option>
<option value="1000">1,000+</option>
<option value="1250">1,250+</option>
<option value="1500">1,500+</option>
<option value="1750">1,750+</option>
<option value="2000">2,000+</option>
<option value="2250">2,250+</option>
<option value="2500">2,500+</option>
<option value="3750">3,750+</option>
<option value="4000">4,000+</option>
<option value="5000">5,000+</option>
<option value="10000">10,000+</option>
</select></div>

24counter flags(customization not tested, counter code only in site)

Code:

<div id="contentfooter" data-container="footer">

    
    <div class="leftrow">
        <a href="/about/">About</a> | <a href="//i-t.jimdofree.com/j/privacy">Privacy Policy</a> | <a href="//i-t.jimdofree.com/j/cookies/policy">Cookie Policy</a> | <a href="/sitemap/">Sitemap</a><br>:copyright: March 14, 2009-Present  Inter-Tips.Jimdo.com    </div>

    <div class="rightrow">
            <a href="/sponsors/?mobile=1" rel="nofollow">Mobile View</a> |
    <span class="loggedout">
        <a rel="nofollow" id="login" href="/login">Log in</a>
<a target="_blank" title="flag and country counter" href="https://24counter.com/conline/1238798592/"><img alt="visitors by country counter" border="0" src="https://24counter.com/online/fcc.php?id=1238798592"></a>

24counter online  

Code:

<a target="_blank" href="https://24counter.com/cc_stats/1590876732/"><img alt="blog counter" border="0" src="https://24counter.com/online/ccc.php?id=1590876732"></a>

Prevent page copy (Was a difficult find, Word Press Plugin works too)

Code:


  <div
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
 unselectable="on"
 onselectstart="return false;"
 onmousedown="return false;">
    Text Here
</div>
</body>

my listennotes short playlist(you can also request yours to be put on my site anytime)

Code:

<iframe src="https://www.listennotes.com/listen/7mxg-lista-UepxjyfCEZM/episodes/embed/" height="50px" width="50%" style="width: 1px; min-width: 40%;" frameborder="0" scrolling="yes"></iframe>

Google drive playlists

Code:

:arrow_forward: Method1 <audio manualplay="autoplay" controls="controls"><source src="https://drive.google.com/u/0/uc?id=1dqBEgzVsP352U1UEOr9eM5x9L4j9LxLZ&amp;export=download/embed/?sort_type=recent_added_first" type="audio/mpeg" /></audio> Method2 <audio manualplay="autoplay" controls="controls" iframe style="width: 1px; min-width: 100%;" src="https://drive.google.com/u/0/uc?id=1dqBEgzVsP352U1UEOr9eM5x9L4j9LxLZ&amp;export=download/embed/?sort_type=recent_added_first" width="100%" height="600px" frameborder="0" scrolling="no"></iframe>

Bbcode.org Forum Insert Url(Via source code src=copy)Pics|Fotos por Url

Code:

[  url=https://www.bbcode.org/images/lubeck.jpg][ img]https://www.bbcode.org/images/lubeck_small.jpg[ /img][ /url]

or [ img ( 50px, 50px) ] ht url.jpg[ /img]
Select All code only works some sites

Code:

<div class="codebox">           <p>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a></p>           <pre><code class="hljs cs">[<span class="hljs-meta">slider</span>] phpbb.com/community/viewtopic.php?t=2133540 {simpletext1}|{simpletext2}[/slider]</code></pre>          </div>           <br>       <br>           <div class="codebox">            
<p>

YT Playlists

Code:

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="//www.youtube.com/v/70OT3UZbhHs&list=PLTjHxCDAsVyzuyGt33zazOSwdTugY7TGj&index=1?color2=FBE9EC&amp;version=3">
</object>