Insert tr after every second loop using Jquery

Step1:

Welcome to Designer blog, Here We are going to discuss about, How to insert tr tag to every  second loop

Step2:

Now, We have the static content of the 4 columns, our requirements is to looping the tr into 2 columns

Step3:

Below script

Step1 : Assigning the four variables  table1, table1, table2, table3, table4 and  passing into array.

Step2 : Assigning the Variable str with opening the table and tr Tags.

Step3 : Looping arrays and checking if condition for  2 cols and one row  using i % 2 if ((i % 2) == 0) ( if u need three cols assign i % 3)

Step4: Create a function output result  append  content in the result div


Script:

var table1 = "<td><table class='suggested-wrapper'  border='0'>" +
            "<tbody><tr> <td><img class='img-responsive' alt='' src='images/banner1.jpg'></td></tr><tr><td><table width='100%' border='0'>  <tbody>" +
                                      "<tr>" +
                                         " <td><img src='images/img1.png' class='img-circle' width='46' height='46' alt=''/></td>" +
            "                              <td><h4> Amanda Costainer </h4>" +
            "                                <small>@amandacontaine </small></td>" +
             "                             <td>...</td>" +
                                        "</tr>" +
                                      "</tbody>" +
                                    "</table></td>" +
                                " </tr>" +
                                 "<tr>" +
                                 " <td><img src='images/iconstar.jpg' width='22' align='left' height='22' alt=''/>" +
                                   "  <h3>American Dad </h3></td>" +
                                " </tr>" +
                                " <tr>" +
                                 "  <td><table width='100%' border='0'>" +
                                  "     <tbody>" +
                                    "     <tr>" +
                                    "       <td class='test'> Lorem ipsum dolor sit amet, nonummy, nulla duis integer vestibulum sapien" +
                                     "        ac, onsectetuer nunc conubia nibh, elit sodales in nisi sit nec.</td>" +
                                        " </tr>" +
                                       "</tbody>" +
                                    " </table></td>" +
                                 "</tr>" +
                                 "<tr>" +
                                   "<td><table width='100%' border='0'>" +
                                      " <tbody>" +
                                        " <tr>" +
                                           "<td><span class='num'> 58 </span> <img src='images/smallstar.jpg' alt='' align='absmiddle'></td>" +
                                           "<td><span class='num'>Rank : 105</span></td>" +
                                           "<td class='num'><img src='images/previous.jpg' alt='' align='absmiddle'>  0</td>" +
                                        " </tr>" +
                                      " </tbody>" +
                                    " </table></td>" +
                                 "</tr>" +
                                " <tr>" +
                                  " <td width='25%'><table border='0' width='100%'>" +
                                      " <tbody>" +
                                       "  <tr>" +
                                         "  <td><span class='num'>120 </span> <img align='absmiddle' src='images/sites.jpg' alt='' ></td>" +
                                          " <td><span class='num'>300 </span><img align='absmiddle' src='images/emp.jpg' alt='' ></td>" +
                                          " <td><span class='num'>1.1k </span><img align='absmiddle' src='images/pagelikes.jpg' alt='' ></td>" +
                                          " <td><span class='num'>97 </span><img align='absmiddle' src='images/report.jpg' alt='' ></td>" +
                                           "<td><span class='num'>120</span> <img align='absmiddle' src='images/cmt.jpg' alt='' ></td>" +
                                           "<td><span class='num'>10 </span><img align='absmiddle' src='images/pageshare.jpg' alt='' ></td>" +
                                         "</tr>" +
                                       "</tbody>" +
                                     "</table></td>" +
                                " </tr>" +
                               "</tbody>" +
                             "</table></td>";

 var array = [table1, table2, table3, table4];


            outputResult = function (str) {
                var content = $('#results').html();
                $('#results').html(content + str);
            }

            var str = "<table><tr>";
            for (i = 0; i < array.length; i++) {
                if ((i % 2) == 0) {
                    var str = str + "</tr><tr>";
                }
                var str = str + "<td>"+ array[i] + "</td>";

            }
            var str = str + "</tr></table>";
            outputResult(str);
        });



Step:5
 Enjoy Folks

 

Toggle method using javascritpt

 Step1:
 

Welcome to designers blog,  Here i have posted how to use toggle effect using Javascript


Step2:

Here we go for the script...

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

 Step3:

Here we go for the styles...

 <style type="text/css">
 .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding:10px!important;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #2a6496;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2796";
}

div.panel {
 
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    margin-bottom:0px!important;
}
.hide
{
    display:none;
}
div.panel.show {
    opacity: 1;
    max-height: 100%; 
}
div.panel.hide {
    display:none; 
}
</style>

 Step5:

Entire mark up 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<h2 class="accordion active">Elementary Campus</h2>
<div class="row panel show">
   <div class="col-md-9">
      <p>Education has been rapidly transforming over the last five years. Our students are no longer asked to memorize and rote -learn rather they are asked to compare, contrast and demonstrate their understanding. These skills are higher order critical thinking skills that will transform each child into a citizen ready for the future.</p>
      <p>At ADNOC Schools we pride ourselves on high expectations and are happy to announce that ADNOC Schools received full international accreditation from the Middle States Association which solidifies our reputation as a premier school in the Middle East.</p>
      <p>Your child is a child of the 2020 vision of the United Arab Emirates and of a future that we do not yet know. It will be their ability to imagine connections, transfer knowledge into new unknown scenarios with courage that will see them thorough. I want your child to know that NASA students are not chosen for their academics alone rather for their determination to keep trying after every failure and keep focused on their goals.</p>
      <p>I look forward to continuing a partnership with you next year and thank everyone for their support and commitment to the highest quality of education.?</p>
   </div>?
   <div class="col-md-3 mg-responsive ms-rteImage-4" style="Padding-top:15px;padding-bottom: 0px;">
      <img align="right" src="/Style%20Library/GLENELG/Images/Paula%20MussonElementaryPrinciple.jpg" alt="" style="width: 180px;"/>
      <b>
         <p>Paula Musson</p></b>? </div>
</div>
<h2 class="accordion">Male Campus</h2>
<div class="row panel">
   <div class="col-md-9">
      <p>Dear ADNOC Male Campus Community of parents, learners and friends, </p>
      <p>It is a great pleasure to welcome you to our school for the 2015-2016 academic year. We are very proud of the efforts of the teachers and support staff as we move our campus community forward and ever upward. We are a building filled with energy, and this is reflected in the work that goes on in classroom lessons every day, done in a spirit of teamwork with cooperation and respect. The world economy no longer rewards people just for what they know. Google knows everything. The world economy rewards people for what they can do with what they know. The ADNOC schools are committed to a rigorous application of a standards based curriculum that is aligned with the programs in the United States, leading up to the challenges of Advanced Placement (AP) classes in the last several high school years, thereby providing our students with the opportunity to apply to and attend some of the finest universities and post-high school programs in the world. One particular emphasis for us in the curriculum is a move to adding elements of STEAM (Science Technology Engineering Arts Math) to all areas of our curriculum, and this is a focused challenge for our faculty  with the support of the curriculum office of ADNOC schools.</p>
      <p>A strong relationship between the school and parents is needed to support students and we were pleased to see a more than 100% increase in the amount of parents taking the opportunity to attend the “Back to School” program in mid September. I was particularly impressed with the dozen student volunteers who served as guides to parents that afternoon, and these students are a fine example of the great work done at this school to grow our boys into young gentlemen. We look forward to many more such events, while also working with parents 1-on-1 to ensure that we do our best to keep parents informed of student progress at school. Our partnership with parents is goal we have as a school to develop in our students a school culture where the National Identity as well as Arabic and Islamic values are honored on a daily basis, while also seeking to connect these to the world where we live as we roll forward farther into the 21st century. We hold daily assemblies to start each day with the National Anthem, and then a student reader recites from the Quaran as a reminder of the national and religious respect held in such high esteem by ADNOC schools.</p>
      <p>I take great pleasure in seeing the “extra” things done by staff for your sons. For example, the staff who on their own helped 50+ student to organize the Iftar celebration on September 21st was a wonderful example of students from all over the world coming together to share a special evening together with their teachers. Another special event was the STEAM special event on September 22nd where all the boys in school that day and all the teachers made teams to have a contest to build the highest tower possible with a limited amount of tape and a stack of newspapers. The creativity, team building and focus that the boys and their teachers exhibited that day was exiting to see, and we plan to do many more such activities to combine fun with positive educational experiences.</p>
      <p>There are various means with which you can communicate with us on the Male Campus. Feel free to call the office to speak with the Secondary School principal’s assistant Ms. Dana Tamini to make appointments to speak to teachers, supervisors, the counselor Mr. Brandon, and Mr. Jeff Sykes, the Vice Principal. You may also email the school staff and even leave a note in the “Parent Suggestion Box” in the male campus front lobby whenever you wish to communicate in writing.<br/></p>
      <p>Together we can help your sons achieve high levels of academic excellence and at the same time help them grow as young leaders of tomorrow, the leaders that are needed for a better, brighter future in the UAE and all over the world. We are committed to doing our best to provide your sons with the best possible social and educational experience we can at ADNOC schools, and I personally look forward to facilitating for staff and teachers so that they can inspire your sons to achieve their very best each and everyday.</p>
      <p>Our emphasis must be on the application and the creative use of knowledge, and at ADNOC Male Campus that is our goal with our students, your sons. </p>
      <p>Thank you for your support  and I look forward to meeting every one of you as the school year progresses. </p>
   </div>
   <div class="col-md-3 mg-responsive ms-rteImage-4" style="Padding-top:15px;padding-bottom: 0px;">
      <img align="right"  src="/Style%20Library/GLENELG/Images/Jim-Pastore.png" alt="" style="width: 180px;"/>?<b style="line-height: 1.42857; background-color: initial;">
         <p style="display: inline !important;">James (Jim) Pastore</p></b><br/><b>?</b>? ?</div>
</div>
<h2 class="accordion">Female Campus? </h2>
<div class="row panel">
   <div class="col-md-9">
      <p>The act of shaping today’s youth and framing them to become tomorrow’s leaders; the creation of citizens who can carry on a monumental legacy that this country has created is what defines ADNOC Schools. Amidst a changing world, the school has modified and also morphed to incorporate the changing needs of our students. By placing emphasis on building their confidence, their sense of identity, and giving them the tools to succeed in college and career worlds, ADNOC Schools has planted seeds that will continue to be cultivated and grown. We have watched the successes of our efforts, of the effort of the parents and the endless of effort of our students foment and come to fruition in front of our eyes through the outputs our students have put forth throughout the year. </p>
      <p>As the years go by, what we have been creating is an innovative, independent, informed, skilled generation ready to face the challenges and the needs of the 21 century.</p>
      <p>Congratulations to each and every member of ADNOC Schools, SAN Campus, the “A” rating as per ADEC’s latest inspection, February 2016. The credit for this rating goes to the whole school community, faculty and staff, students and parents, and supportive board.</p>
      <p>We are ADNOC Schools; an educational entity that prides itself on placing its students in the forefront and watching them succeed and develop as a result. As the years go by, what we have to hold are the wonderful memories created with our ADNOC Schools family preserved in our hearts and minds, shining through and reaching out to the community.</p>
      <p>?We are ADNOC Schools, we make a difference.</p>
   </div>?
   <div class="col-md-3 mg-responsive ms-rteImage-4" style="Padding-top:15px;padding-bottom: 0px;">
      <img align="right"  src="/Style%20Library/GLENELG/Images/Abufemale.jpg" alt="" style="width: 180px; "/>
      <b>
         <p>Lamia Najjar</p></b>? </div>
</div>
<br/>


<style type="text/css">
 .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding:10px!important;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #2a6496;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2796";
}

div.panel {
 
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    margin-bottom:0px!important;
}
.hide
{
    display:none;
}
div.panel.show {
    opacity: 1;
    max-height: 100%; 
}
div.panel.hide {
    display:none; 
}
</style>
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}
</script>
</body>
</html>

Step6:

Enjoy Folks