જયેશ સુતરીયા વેબ બ્લૉગ : Accordion menu code

flag

❆*_PARIKSHA PE CHARCHA MARCH_2024..._Celebrate Indi@_ *❆

_ભાષા અધ્યયન નિષ્પત્તિઓ (ક્ષમતાઓ) ધોરણ ૬ થી ૮_

_ધોરણ ૬ થી ૮ કવિતાઓ _

_ વાર્ષિક તેમજ માસિક પાઠ આયોજન અને નિબંધ આયોજન _

_PRAISA સોફટવેરને લગતી મહત્વની માહિતી _

_ભાષા ટેક્સ બુક ધોરણ ૬ થી ૮_

_વિદ્યાસહાયક પુરા પગાર / ઉચ્ચતર પગાર દરખાસ્ત _

_ સર્વગ્રાહી મૂલ્યાંકન સોફ્ટવેર _

_બિટ કેળવણી નિરીક્ષકની પરીક્ષા ઉપયોગી માહિતી _

_શાળા ઉપયોગી એક્સલ સોફ્ટવેર _

_ "The Beauty Of the Work Depends Upon the Way, We meet it_ _

"આ બ્લોગને વ્યવસ્થિત જોવા માટે આપણા કમ્પ્યુટર-લેપટોપમાં Bhuj Unicode,Bhavnagar Unicode આ પ્રમાણેના ફોન્ટ હોવા જરૂરી છે જે આપને સોફ્ટવેર મેનુના સબ મેનુમાં કોમ્પ્યુટર ફોન્ટ મેનુ માંથી મળશે જે ઇન્સ્ટોલ કરી રિસ્ટાર્ટ કરી બ્લોગ સારી રીતે જોઇ શકશો" - "ભાષાશિક્ષણના મારા આ બ્લોગમાં આપ સૌનું હાર્દિક સ્વાગત છે. આ બ્લોગ ભાષા શિક્ષણ કાર્યમાં આપ સૌને ઉપયોગી થશે તેવી આશા છે. ._મારા આ બ્લોગમા શિક્ષણને લગતી કોઈપણ માહિતી કે ઉપયોગી ફાઈલ શેર કરવા ઇચ્છતા હો તો અહીં આપેલ google ફોર્મ પર માહિતી અપલોડ કરી શકો છો ,_ _તો આ બ્લોગની અવાર- નવાર મુલાકાત લેતા રહેશો અને આ બ્લોગ વિશેના આપના અભિપ્રાયો તથા સૂચનો આવકાર્ય છે. આભાર સહ..."

જો શિક્ષક દોડશે તો બાળક ચાલવાની શરૂઆત કરશે, શિક્ષક ચાલશે તો બાળક ઊભો રહી જશે, શિક્ષક ઊભો રહી જશે તો બાળક નીચે બેસી જશે, શિક્ષક બેસી જશે તો બાળક સૂઈ જશે, શિક્ષક સૂઈ જશે તો બાળક મુરજાય જશે , માટે શિક્ષકે સતત પ્રયત્ન - પ્રવૃત્તિશીલ રહેવું જ પડશે.-બર્નાર્ડ રૂસેલ _

_ THANKS _FOR _VISIT _

Tuesday, 2 June 2020

Accordion menu code

➮ Accordion Menu code મેનુ તૈયાર કરવા માટે ઉપયોગી કોડ નીચે આપેલ છે જે કોડની મદદથી ડ્રોપ મેનુ લીસ્ટ તૈયાર કરી શકાય છે.

❆ Multi Accordion Menu code Below ❆

❆ ➯ Simple Accordion menu code click here


        ➮   Type Below Code in  Blog Page  and type data to text is  "Type your text here" type in your data their

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: blue;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 13px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: pink; 
}

.panel {
  padding: 0 10px;
  display: none;
  text-align: center;
  color: red;
  font-size: 13px;
  background-color: #efe;
  overflow: hidden;
  font-family: arial;
}
</style>
</head>
<body>

<h3 style="color:blue; font-family: arial; font-size:13px;">Click Dropup menu code</h3>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Type your text here</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Type your text here.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Type your text here.</p>
</div>

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

</body>
</html>

❆ ➯ New Multi Accordion menu code Green _ Saffron Click here



<style>
	/* Style the buttons that are used to open and close the accordion panel */
		.accordion {
		    background-color: #639c84;
		    color: #FFF;
		    cursor: pointer;
		    padding: 6px;
		    width: 100%;
		    text-align: left;
		    border: 0.5px solid white;
		    outline: none;
		    transition: 0.4s;
		    font: 13px Lato, sans-serif;
          border-radius: 5px;
		}

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

		/* Style the accordion panel. Note: hidden by default */
		.panel {
		    padding: 0 5px;
		    background-color: white;
		    display: none;
		    overflow: hidden;
		}

		p{
			font: 13px Lato, sans-serif; 
		}

		.accordion:after {
		    content: '\02795'; /* Unicode character for "plus" sign (+) */
		    font-size: 10px;
		    float: right;
		    margin-left: 5px;
		}

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

<body>
  <h2 style="color: red; font-family: bhavnagar unicode; font-size: 16px; text-align: center;">  Accordian menu code </h2>
	<button class="accordion">*         sutariya</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>*************************</p>
        </pre>
	</div>

	<button class="accordion">*        Jayeshkumar</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>-----------------------------------------------------</p>
        </pre>
	</div>

	<button class="accordion">*        Popatbhai</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>*****************************************************</p>
        </pre>
	</div>
  
  <button class="accordion">*         Trapaj</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>---------------------------------------------------</p>
        </pre>
	</div>

  <button class="accordion">*           Talaja</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>++++++++++++++++++++++++++++++++++++++++++++</p>
        </pre>
	</div>
  
  <button class="accordion">*          Bhavnagar</button>
	<div class="panel">
      <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 14px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 3px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
		<p>************************************************</p>
        </pre>
	</div>
  
	<script type="text/javascript">
		var acc = document.getElementsByClassName("accordion");
		var i;

		for (i = 0; i < acc.length; i++) {
		    acc[i].addEventListener("click", function() {
		        /* Toggle between adding and removing the "active" class,
		        to highlight the button that controls the panel */
		        this.classList.toggle("active");
		        /* Toggle between hiding and showing the active panel */
		        var panel = this.nextElementSibling;
		        if (panel.style.display === "block") {
		            panel.style.display = "none";
		        } else {
		            panel.style.display = "block";
		        }
		    });
		}
	</script>
</body>


➮ Type  This  Symbol  in Page  HTML  code  type

❆ ➯ Accordion menu code White Below code click here



<style>
	@import url('https://fonts.googleapis.com/css?family=Arial');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arial', sans-serif;
  background-color: #34495e;
  color: #fff;
}
h1 {
  text-align: center;
  margin: 1rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 100%;
  max-width: 1000px;
  margin: 0rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 0.2rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 1.1rem;
  line-height: 1.1rem;
  font-weight: none;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 1.2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 0.5rem;
  line-height: 1rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:1000px) {
  html {
    font-size: 13px;
  }
}
	</style>

<body>
 
  <h2 style="color: red; font-family: bhavnagar unicode; font-size: 15px; text-align: center;">  Tital section  </h2>
  
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ 1111111111111111111111111
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
        
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ 2222222222222222222222222
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
     ➯ 33333333333333333333333333
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ 44444444444444444444444444
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ 55555555555555555555555555
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
      </div>
    </div>
  </div>
 <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ More...
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  ##################################################
</pre>
      </div>
    </div>
  </div> 
  
  
  
  
</div>
  
	<script type="text/javascript">
		const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {
    
    // Uncomment in case you only want to allow for the display of only one collapsed item at a time!
    
    // const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
    // if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
    //   currentlyActiveAccordionItemHeader.classList.toggle("active");
    //   currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
    // }

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});
	</script>
</body>

❆ ➯ Pre tag table code simple part-1 click here



<pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; font-family: bhuj unicode; text-align: left; overflow: inherit; padding: 5px; vertical-align: baseline; white-space: pre-wrap;">

  This Section is working Mode <br />
</pre>

❆ ➯ Pre tag table code simple part-2 click here



<pre class="wp-block-code" style="background: rgb(238, 238, 238); border-radius: 4px; border: 1px solid rgb(226, 228, 231); box-sizing: border-box; color: #23282d; font-family: Menlo, Consolas, monaco, monospace; font-size: 14px; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; outline: 0px; overflow: auto; padding: 0.8em 1em; vertical-align: baseline;">
<code style="border: 0px; box-sizing: border-box; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">

insert your text

</code></pre>

❆ ➯ Text Area code click here


➯ Text Area code type and close it's code tag use blog page last And code is Green mode is ...

❆ ➯ Pink color Accordion menu code click here


➯ Pink color Accordion menu code type in Page         
        
        <style>
.accordion {
  background-color: #eee;
  color: blue;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 13px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: pink; 
}

.panel {
  padding: 0 13px;
  display: none;
  text-align: center;
  color: red;
  font-size: 13px;
  background-color: #efe;
  overflow: hidden;
  font-family: arial;
}
</style>  
<body>
<h2 style="color: green; font-family: bhavnagar unicode; font-size: 16px; text-align: center;">  Accordian menu code? </h2>

<button class="accordion">Accordian menu code?1 </button>
<div class="panel">
 <pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 15px; line-height: inherit; margin-bottom: 1px; margin-top: 1px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 10px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<span style="font-family: bhuj unicode;">
Insert Text here 
<a href="#" target="_blank"> All Letter PDF Download Click Here </a>
**********************************************************

</span>
</pre>
</div>

  <button class="accordion">Accordian menu code?2 </button>
<div class="panel">
 <pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 15px; line-height: inherit; margin-bottom: 1px; margin-top: 1px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 10px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<span style="font-family: bhuj unicode;">
Insert Text here 
<a href="#" target="_blank"> All Letter PDF Download Click Here </a>
**********************************************************

</span>
</pre>
</div>
  <button class="accordion">Accordian menu code?3 </button>
<div class="panel">
 <pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 15px; line-height: inherit; margin-bottom: 1px; margin-top: 1px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 10px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<span style="font-family: bhuj unicode;">
Insert Text here 
<a href="#" target="_blank"> All Letter PDF Download Click Here </a>
**********************************************************

</span>
</pre>
</div>
  
<button class="accordion"> More Section ... </button>
<div class="panel">
<pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 14px; line-height: inherit; margin-bottom: 1px; margin-top: 1px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 20px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<span style="font-family: bhuj unicode;">

This section is working mode ...

</span>
</pre>
</div>

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

</body>

❆ ➯ More...


 ➯ writing the  discription code here 
        
       
code here 

 ❆ ➯ This section is working mode ...

➯ Text Area is HTML code show short view mode code is below

Type your text here

</textarea>

</center>

Follow @jpsutariya1

Press Note :-

❆ ➯ આ બ્લોગ વાંચનાર તમામ વાચક મિત્રોનું હાર્દિક સ્વાગત છે, કોઈપણનો કોપીરાઇટનો ભંગ થતો હોય તો ધ્યાન દોરવું. ❆

❆ આ બ્લોગ નિરંતર આપની મદદ માટે તત્પર રહે એવી અભ્યર્થના ❆

___❆ ➯ આ બ્લોગમાં શિક્ષણને રસપ્રદ બનાવી શકાય તે માટે જરૂરી માહિતી અને સંદર્ભ સાહિત્ય મુકવામાં આવશે. ❆ ___

main dropdown menu

flag

Latest Notification

Tuesday, 2 June 2020

Accordion menu code

Press Note :-

visitors

Online this Times

Search here