Menu
I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:
<div> <fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)"> <legend class="majorpointslegend">Expand</legend> <div style="display:none" > <ul> <li></li> <li></li> </ul> </div> </div> So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"
The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.
The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.
Here is the javascript:
function majorpointsexpand(expand) { if (expand == "Expand") { document.write.$(this).find('div').style = "display:inherit"; document.write.$(this).find('legend').innerHTML = "Collapse"; } else { document.write.$(this).find('div').style = "display:none"; document.write.$(this).find('legend').innerHTML = "Expand"; } } I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.
I do have jQuery linked to the document with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> In the <head></head> section.
933
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
So, I decided to code a simple and straightforward HTML & CSS based accordion to expand and collapse text without using JavaScript. Generally, an accordion is used to make expandable HTML contents on a Web page. For heavy contents websites we need a multi-functional accordion plugin that comes with multiple configuration options.
Pure javascript allowing only one expanded div at a time. It allows multi-level sub-expanders. The html only need the expanders contents. The javascript will create the expanders headers with the titles form the content data attribute and a svg arrow.
Collapsing/expanding multiple sections of a web page simultaneously with JavaScript is a technique for dynamically changing the displayed content of a web page. Some notes on this example:
In jQuery, the show () and hide () method are used to show or hide any element in HTML. We can use these functions to collapse or expand the div tag as shown below.
Okay, so you've got two options here :
fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.Here's how you do that. Create a HTML structure like this :
<div class="container"> <div class="header"><span>Expand</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div> With this CSS: (This is to hide the .content stuff when the page loads.
.container .content { display: none; padding : 5px; } Then, using jQuery, write a click event for the header.
$(".header").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function () { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function () { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/
105
how about:
$('.majorpoints').click(function(){ $(this).find('.hider').toggle(); }); <div> <fieldset class="majorpoints"> <legend class="majorpointslegend">Expand</legend> <div class="hider" style="display:none" > <ul> <li>cccc</li> <li></li> </ul> </div> </div> This way you are binding the click event to the .majorpoints class an you don't have to write it in the HTML each time.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
