Content Editor web part Query

Step:1 This is the requirement  expand the row on mouse hover

Step:2::Second  row  have expand when the mouse is hove on second row

Step:3::Content Editor code 

<div style=”width:18%”> 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js” type=”text/javascript”></script>

<script src=”/Style%20Library/js/ddaccordion.js” type=”text/javascript”></script>

<style type=”text/css”> 

.mypets{ /*header of 1st demo*/

cursor: hand;

cursor: pointer;

background: #E1E1E1;

}

 

.openpet{ /*class added to contents of 1st demo when they are open*/

background: #5EBFFE;

}

 

.technology{ /*header of 2nd demo*/

cursor: hand;

cursor: pointer;

font: bold 14px Verdana;

margin: 10px 0;

}

 

 

.openlanguage{ /*class added to contents of 2nd demo when they are open*/

color: green;

}

 

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/

color: red;

}

 

</style>

<script type=”text/javascript”>

ddaccordion.init({

                headerclass: “mypets”, //Shared CSS class name of headers group

                contentclass: “thepet”, //Shared CSS class name of contents group

                revealtype: “mouseover”, //Reveal content when user clicks or onmouseover the header? Valid value: “click”, “clickgo”, or “mouseover”

                mouseoverdelay: 200, //if revealtype=”mouseover”, set delay in milliseconds before header expands onMouseover

                collapseprev: true, //Collapse previous content (so only one open at any time)? true/false

                defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.

                onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)

                animatedefault: false, //Should contents open by default be animated into view?

                scrolltoheader: false, //scroll to header each time after it’s been expanded by the user?

                persiststate: true, //persist state of opened contents within browser session?

                toggleclass: [“”, “openpet”], //Two CSS classes to be applied to the header when it’s collapsed and expanded, respectively [“class1”, “class2”]

                togglehtml: [“none”, “”, “”], //Additional HTML added to the header when it’s collapsed and expanded, respectively  [“position”, “html1”, “html2”] (see docs)

                animatespeed: “fast”, //speed of animation: integer in milliseconds (ie: 200), or keywords “fast”, “normal”, or “slow”

                oninit:function(expandedindices){ //custom code to run when headers have initalized

                                //do nothing

                },

                onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed

                                //do nothing

                }

})

</script>

 

<h3 class="mypets">KHALIFA ST.BRANCH</h3> <div class="thepet"> <a href="www.google.com">A</a>   <a href="www.google.com">B</a>  <a href="www.google.com">C</a>   <a href="www.google.com">D</a>   <a href="www.google.com">E</a>   <a href="www.google.com">F</a> </div>  <h3 class="mypets">AIRPORT ROAD BRANCH</h3> <div class="thepet"> <a href="www.google.com">A</a>   <a href="www.google.com">B</a>  <a href="www.google.com">C</a>   <a href="www.google.com">D</a>   <a href="www.google.com">E</a>   <a href="www.google.com">F</a> </div>  <h3 class="mypets">AL AIN CITY BRANCH</h3> <div class="thepet"> <a href="www.google.com">A</a>   <a href="www.google.com">B</a>  <a href="www.google.com">C</a>   <a href="www.google.com">D</a>   <a href="www.google.com">E</a>   <a href="www.google.com">F<

My Requirement

Step:4::Suppose site admin is not technical or the requirement is  change the row content change  on daily basics so he will edit the page in daily basics so my question is that is any other way to put the code in content editor web  part without edit the page

Thanks for your support