I have the following jQuery code to toggle the view of more information in a div.
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
});
The code works to toggle the view of displaying more information when the submission header is clicked. The div IDs of $moreInfo are dynamically created.
$moreInfo = $bidValue.''."_status";
echo "<div class='expandCollapse' id='$bidValue'>Submission</div>";
echo "<div id='$moreInfo'>$displayComments</div>";
However I want to open only one view/div at a time. If a div is open when a submission is clicked it should be closed before the other one is opened.
I've tried several things but it closes or hides all divs. Searching the web only show a solution using anchor tags.
Any thoughts...?
Thanks.
To achieve this you can put a common class on the second div element to allow you to hide them all before showing the next, like this:
echo '<div id="$moreInfo" class="expand-area">$displayComments</div>';
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#" + bidValue + '_status').slideToggle(500)
$('.expand-area').not(expandArea).hide();
});
Also note that you can make your code much more simple and generic by usnig DOM traversal to select the elements, instead of building selector strings based on related id attributes, like this:
$(".expandCollapse").click(function () {
var expandArea = $(this).next('.expand-area').slideToggle(500);
$('.expand-area').not(expandArea).hide();
});
The code above assumes that the elements are siblings, but you can easily amend the next() to traverse however is required.
Assuming the header and content divs are siblings you may use:
$(.expandCollapse + div)
// All <div>s that are immediately after an .expandCollapse
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
$('.expandCollapse + div').not(expandArea).hide();
});
$('[id$="_status"]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='expandCollapse' id='bidValue1'>Submission1</div>
<div id='bidValue1_status'>displayComments</div>
<div class='expandCollapse' id='bidValue2'>Submission2</div>
<div id='bidValue2_status'>displayComments</div>
<div class='expandCollapse' id='bidValue3'>Submission3</div>
<div id='bidValue3_status'>displayComments</div>
Related
So I have several divs that i assigned a class to. Each div has a header. The contents underneath each header are dynamically generated via php. Certain times of the year these divs contain no information but the header still displays. I want to hide the divs that do not have any paragraphs inside of them I cannot quite get them to work and I have a feeling it has to do with the paragraphs being generated by php.
EXAMPLE:
<div class="technology_connected article_headers">
<h3>TECHNOLOGY CONNECTED</h3>
<?php echo $tools->article_formatter($articles, 'Technology Connected'); ?>
</div>
Here is my Jquery code.
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$('.article_headers').show();
}
});
});
Try this:
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$(this).show();
}else{
$(this).hide();
}
});
});
DEMO
As noted by #JasonP above, this really should be done server side. However, since you do want it done server side, you can simplify the process greatly. Generate the data server side as you're doing. Make sure all <div> tags are visible. Then in your JavaScript use the following selector:
// Shorthand for $(document).ready(function() { ... });
$(function () {
$('.article-headers:not(:has(p))').hide();
});
The selector above targets all elements with the class .article-headers that do not contain a <p> tag and hides them.
JSFiddle demoing the above as a toggle button to show or hide the no paragraph sections.
Here is what i want: I have multiple <h3> tags that are being uses as a link to reveal answers to FAQ's. Also I have added a form in case that the user did not see any question of interest on that page. The link for the form is at the bottom of the page. Now when the user click on the show form link I would like the window to scroll down to the bottom. I have done this, however when I click on any of the link the window also scrolls to the bottom. I want when the user clicks only on the show form link that the window scrolls.
here is what I have so far:
<body>
<?php
$array = array("link 1","link 2","link 3");
foreach($array as $link)
{
echo "<h3 class='link'>".$link."</h3>";
echo "<div>";
//information to be displayed
echo "</div>";
}
?>
<h3 class="forms">Show Form</h3>
//form information here
</body>
here is the javscript:
<script>
$(document).ready(function(){
$('h3').click('bind',function() {
$(this).toggleClass('open').next().slideToggle(500,function(){
var i = $(this).prop('class');
if(i == 'forms')
{
$("html, body").animate({scrollTop: $(document).height()}, "slow");
}
});
});
});
</script>
I have added an alert to verify my output and when I click on <h3 class="forms"> the alert is blank but when I click on the others the alert showed "link". Can someone help me figure out why the alert is showing blank when I click on the <h3 class="forms"> tag?
You are echoing your LI with the link class, instead of $link.
Also, use
if ($(this).hasClass("forms"))
.prop() should really only be used when accessing the DOM element's properties and not attributes (like class or style, width, etc.). If you want the class, use .attr('class') instead (or, as others have mentioned, you can use .hasClass() to test (with jQuery) if an element has a specific class aplied).
to follow-up on .prop vs .class:
Foo Bar link
var a = document.getElementById('foolink'),
$a = $(a);
$a.prop('href') // like directly calling a.href
$a.prop('id') // again, like directly calling a.id
$a.attr('class') // where as it's actually a.className
I have a web page that lists a number of companies from a MYSQL database, the listing just shows the name of the company. When user clicks on the company name a jquery accordion slider shows the rest of the information about that company.
When company name is clicked it also sends a request to a php script to log that a person has viewed that company's details.
My Problem
I want to send the ID for each record to the php script.
I have achieved this by including the accordion jquery code within the while loop that reads the output of the mysql query, but it generates a lot of unnecessary source code (i.e. for each company listed).
I need to include the jquery accordion code outside of the while statement.
How do I pass the id of each database record (i.e. company name) to the $.post in the jquery code, when it is outside of the while loop?
Accordion Jquery code
$(document).ready(function() { $('div.listing> div').hide(); $('div.listing> h4').click(function() {
$.post("/record.php", { id: "<?php echo $LM_row02[id]; ?>" } )
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
} }); });
Any idea most welcome.
When you create the HTML (I assume you do that in the loop as well), add a data-* attribute with the ID as value to the element and read that value with jQuery when the element is clicked on.
E.g. your resulting HTML will look like:
<h4 data-id="123">Some title</h4>
and your JavaScript:
$('div.listing > h4').click(function() {
$.post("/record.php", { id: $(this).attr('data-id') }, function() {
// ...
});
});
When you create the h4 element in html add a html5 data attribute like
<h4 data-companyid="<?php echo $LM_row02[id]; ?>">Company Name</h4>
Then use that companyid in your ajax call like
$.post("/record.php", { id: $(this).data('companyid') } );
I'm not sure whether I should be doing this with jquery or php, but I have a html page with several divs of the same class, but different ids. ie:
<div class="something" id="furniture">contents</div>
<div class="something" id="lighting">contents</div>
<div class="something" id="homewares">contents</div>
What I'm looking at doing is creating a <ul> generated by the ids of any div with the class "something".
Would I be best doing this using jquery? and how would I best go about creating a list/menu of these divs?
You would use PHP if that is an option (i.e. you know the ids when you load the page and are generating them from your PHP already), otherwise only the people with JavaScript enabled are going to see your page content (and search engines would probably punish this "hidden" content).
If you have the list of ids in a PHP array you would do something like this:
<?php
$ids = array('furniture, 'lighting', 'homewares');
?>
<ul>
<?php foreach ($ids as $id) : ?>
<li><?=$id?></li>
<?php endforeach; ?>
</ul>
If you wanted to use jQuery you could do this:
$('body').append('<ul id="yourID"></ul>');
$('div.something').each(function() {
$('ul#yourID').append('<li>' + $(this).id + '</li>');
});
Update (you want to replace the div tags and put the ids on the li tags)
$('body').append('<ul id="yourID"></ul>');
$('div.something').each(function() {
var $id = $(this).id;
$(this).remove();
$('ul#yourID').append('<li id="' + $id + '">' + $id + '</li>');
});
well, to "convert" that structure into ul's, code should look like:
var $target = $('.something'),
$parent = $target.parent(),
$list = $('<ul/>', {
id: 'your_id_here',
css: {
backgroundColor: 'red'
// more css attributes, or use class: to assign a css class
}
});
$target.each(function(){
$list.append('<li>' + $(this)[0].id + '</li>');
});
$target.remove();
$parent.append($list);
That would replace the divs with ul's. Importan thing in this example is to remove
the original div because of the ids, which have to be unique in a valid html markup.
Assuming the HTML you've provided is rendered, and that you have an available UL element on the page, you can use JQuery to do (something like) the following
jQuery('.something').each(
function(index, Element) {
var newListElement = jQuery(document.createElement('li'));
newListElement.html(Element.html());
jQuery('#myul').append(newListElement);
});
It's a bit unclear as to the restrictions that are imposed upon you, but I hope this helps.
I have some SQL output that id like to format into a collapsible div. The problem is that all the JS show/hide div code I find isn't really meant for dynamic instances, they all need to be pre-assigned to a particular div. Since my results may vary from 1-30...this isn't really a good option.
My question. Is there an easy way to dynamically generate show/hide controls for a varying number of layers?
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
It actually is pretty easy with mootools (or jquery for that matter).
You just need to give all generated divs the same class and select all of them and apply collapsible behaviour.
This is a little script written in mootools for one of our projects and might get you on the way. It fetches all elements with classes that start with toggle_ and the part that comes after the underscore is the id of the div this control is supposed to collapse.
So you generate a butteon with class 'toggle_mydiv1' which would toggle a div with id 'mydiv1'
This way you can generate as many elements as you want and assign behaviour to all of them with one script.
Written in mootools:
window.addEvent('domready', function(){
var clickAbles = $$('form[class^=toggle_]');
clickAbles.each(function(el){
var _class = el.get('class').split(' ');
var clickElement = _class[0].replace('toggle_','');
clickElement = $$('ul.buttons li.'+clickElement+' a');
if(clickElement){
var myFx = new Fx.Tween(el,{duration: 'long'});
var myFx2 = new Fx.Tween(el,{duration: 'long'});
el.store('height', el.getSize().y);
el.store('state', 'close');
el.setStyles({'display': 'none', 'height': 0});
var todoLists = el.getElements('ul.todo_list');
clickElement.addEvent('click', function(e){
e.stop();
if(el.retrieve('state') == "close"){
el.setStyle('display','block');
myFx.start('height', [0,el.retrieve('height')]);
myFx.addEvent('complete', function(){
todoLists.setStyles({'overflow': 'auto'});
el.store('state', 'open');
});
} else {
if(el.retrieve('state') == "open"){
myFx2.start('height', [el.retrieve('height'),0]);
myFx2.addEvent('complete', function(){
el.setStyles({'display': 'none', 'height': 0});
todoLists.setStyles({'overflow': 'hidden'});
el.store('state', 'close');
});
}
}
});
}
});
});