I have a page which has a number of collapsed DIVs showing content. I want to be able to link to this page and have the relevant DIV already open. E.g. Read about Section 2". This is the code I have to control the collapse and expand.
<script>
jQuery(function ($) {
$(".header").click(function () {
$header = $(this);
$span = $header.find(">:first-child"),
//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)
if ($span.text() == "-")
$span.text("+")
else {
$span.text("-")
}
});
});
</script>
<div class="container">
<div class="header" id="A">
<span>+</span>
<h2>Section1</h2>
</div>
<div class="content" id="B">
I'm the content for section 1.
</div>
<div class="header">
<span>+</span>
<h2>Section 2</h2>
</div>
<div class="content">
I'm the content for Section 2
</div>
</div> <!--- /container -->
Get id from url and then call click function to open this on document ready
$(document).ready(function(){
var id = location.search.split('page=')[1];
//find div of according clickable header. not sure which is in your code
$($("#"+id).prev()).trigger("click");
});
Related
I have a function which, when clicking on a link with the class .show-more, opens up the div with the class .productinfo. Now, it also adds a class to the link itself (.active) - the problem what I have is that I have a few links on this page with the same class. I've managed to only open up the correct .productinfo when clicking on it, but the class will be added to every link nonetheless. Also tried adding the following to the code but that did not work:
$(this).find('show-more').toggleClass("active");
My structure is the following:
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
jQuery(document).ready(function($) {
$('body').on('click', 'a.show-more', function(e) {
e.preventDefault();
$('.show-more').toggleClass("active");
var $this = $(this).parents('.product');
$this.find('.productinfo').toggle(0, 'slide')
});
});
Why not:
$('a.show-more').on('click', function(e)
and then
$(this).toggleClass("active");
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
I was trying to remove the whole parent div if it doesn't have the wc-gallery class on it. What I have in my script is the reverse of what I need. Basically it hide everything that has the wc-gallery on it.
SCRIPT:
// Additional Scripts
$(window).load( function() {
$(".gallery-container2 .gallery-item .wc-gallery").hide();
});
$(".gallery-container2 p").click(function() {
var id = $(this).data('id');
$("[data-id=" + id + "].gallery-item .wc-gallery").toggle()
});
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').hide();
});
});
Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. Only way to solve this without conflict is to load first all of the containers then hide() or remove() them.
SCRIPT: (conflict due to onload content rendering)
$('.gallery-container2').hide();
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').show();
});
});
HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.)
<ul>
<li><div class="gallery-container2">
<p data-id="1723"><strong>some text</strong></p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery" style="display: none;"></div>
</div>
</div></li>
<li><div class="gallery-container2">
<p data-id="2455"><strong>View before and after</strong></p>
<strong></strong>
<div class="gallery-item" data-id="2455">
<div><div></div></div>
</div>
</div></li>
</ul>
Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. if not hide the element.
$('.gallery-container2').each(function(){
var $this = $(this);
//find element with 'wc-gallery' class
var hasGallery = $this.find('.wc-gallery').length > 0;
if(!hasGallery){
$this.hide();
}
});
Pure JS you might do like this in ES6 terms.
var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)");
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";
<div class="gallery-container2">
<p data-id="1723"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery">first container</div>
</div>
</div>
<div class="gallery-container2">
<p data-id="1724"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1724">
<div>
<div>second container</div>
</div>
</div>
</div>
Try this. If div has children with class .wc-gallery than it will show the parent otherwise hide the parent.
$(function () {
$(".gallery-item").each(function () {
if($(this).children('.wc-gallery').length > 0)
$(this).parents('.gallery-container2').show();
else
$(this).parents('.gallery-container2').hide();
});
});
Can i set first panel on Jquery automatically opened?
My accordion panel is close all.
This is my html
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
This is my JS script
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
});
This the JSFiddle Link http://jsfiddle.net/bupd32rq/
Thanks for your help
Panels that opened were added with current class, then put class current manually on first panel and respective div with style="display:block":
<div class="acitemx current">
<h3>First Panel</h3>
<div class="accx" style="display:block">
This is the content
</div>
</div>
Updated DEMO
you can just add .eq(0).click()
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
}).eq(0).click();
DEMO
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/