જયેશ સુતરીયા વેબ બ્લૉગ : 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

Tuesday, 2 June 2020

Accordion menu code