javascript - How can I create an accordion with jQuery in WordPress? -
i trying create accordion little bit different most.
what trying do:
- have title when clicked description displayed across width of page
- i have titles split across screen 3 columns; therefore title not span width of page
basically looking this:
as can see little different cases. found live demo of similar trying do, can found here.
what i've done far:
i have been using cherry framework , using shortcodes try work, run issues when try expand description out title. not sure if there way edit accordian shortcode allow description go full width or not, think ideal.
here code far:
[tabs direction="top" tab1="the first tab" tab2="the second tab" tab3="the third tab"] [tab1] [row] [span4] [accordion title="title 1"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [span4] [accordion title="title 2"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [span4] [accordion title="title 3"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [/row] [row] [span4] [accordion title="title 4"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [span4] [accordion title="title 5"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [span4] [accordion title="title 6"] lorem ipsum dolor sit amet, consectetur adipiscing elit. cras lorem lectus, porta et nulla ut, bibendum placerat sem. aliquam consequat ante, cursus posuere eros. fusce ac turpis in turpis elementum malesuada vitae eu urna. curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci @ sem. sed arcu tellus, vulputate non ante vitae, varius congue urna. duis sed lacus est. mauris eu lacus ac enim fermentum vestibulum. pellentesque pellentesque ornare auctor. curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. [/accordion] [/span4] [/row] here screenshots have: 
like said using shortcodes of right now. sure there easier way not run issues description text not go across width of page.
below example please check code.
$(document).ready(function(){ $('.main ul li').click(function(){ $('.main ul li').removeclass('active'); $(this).addclass('active'); $('.main ul li').css('margin-bottom','1%'); $('.innerbox').hide(); var boxheight=$(this).children('.innerbox').innerheight(); $(this).css('margin-bottom', boxheight); $(this).children('.innerbox').slidedown(); var widthul = $('.main ul').width() - 10; var test = $(this); var leftul = test.position().left; $('.innerbox').css({'width': widthul,'margin-left':- leftul}); }); });*{ margin:0; padding: 0; box-sizing: border-box; } .clrfix:after{ content:''; clear:both; display:block; } .main{ width:900px; margin:0 auto; border:1px solid #ccc; position: relative; overflow:hidden; } .main ul li{ padding:.5%; width:31%; border:1px solid #ccc; list-style:none; margin:1%; display:inline-flex; position: relative; border-radius:5px; } .main ul li.active{ background:#d7e3de; border:1px solid #333; border-bottom:none; padding:1%; border-radius:0; } .main ul li.active .innerbox{ top:37px; } .main ul li .innerbox{ background:#d7e3de; position:absolute; left:-1px; display:none; top:38px; z-index:1; border:1px solid #333; padding:10px; min-height:20px; }<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="main"> <ul class="clrfix"> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat caborum</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">test</div> </li><li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">test</div> </li><li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">test</div> </li><li>title here <div class="innerbox">test</div> </li> <li>title here <div class="innerbox">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco labint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </li> <li>title here <div class="innerbox">test</div> </li> </ul> </div>and hope i'll helps you
Comments
Post a Comment