How to keep one toggle open by default javascript - javascript

I was wondering is it possible to keep one toggle open on page load by default, i have been tearing my hair out on this one.
any help will be appreciated.
Its the your account toggle i am trying to keep open!
$(document).ready(function () {
$("#account").show("slow").siblings().hide("slow");
$('a#francc').click(function () {
var divname = this.name;
$("#" + aname).show("slow").siblings().hide("slow");
});
});
<div class="sidebar">
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;"> </div>
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;"><div>
<!-- your account -->
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

Sure, just remove that sibling from the selection. There's a lot wrong with your HTML too. I've removed the onclicks, and you had an opening div tag where a closed one should have been.
$(document).ready(function () {
// set up the click event
$('.sidebar > a').on('click', function(){
$(this).next('div').show("slow").siblings('div:not(#Franc)').hide("slow");
});
// trigger orders which has id francc, not orders
$('#francc').trigger('click');
// or perhaps you mean this, but it's slower // $('a[name="account"]').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<a id="order" class="header" href="#"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;"> orders dropdown </div>
<a id="restt" class ="header" href="#"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;">Your Restaurants dropdown</div>
<!-- your account -->
<a id="francc" name="account" class ="header" href="#"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

this will work, http://fiddle.jshell.net/9oo1jrr9/
<script>
$(document).ready(function () {
$("#Rest").show().siblings('div').hide();
});
function toggleVisibility(ctrlThis){
$("#" + ctrlThis).first('div').show("slow").siblings('div').hide();
}
</script>
<div class="sidebar">
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Order 1</li>
<li id="order" class="Blue" >Order 2</li>
</ul>
</div>
</div>
<a id="restt" class ="header" href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Restaurants 1</li>
<li id="order" class="Blue" >Restaurants 2</li>
</ul>
</div>
</div>
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

Related

How can I tracking link clicks dynamically with google analytics?

My html code like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
#foreach (Sitecore.Data.Items.Item item in _stickyMenu.Children)
{
<li class="content accent-4 z-depth-2 #item.Fields[Templates.Navigable.Fields.CustomClass]" data-color="#item.Fields[Templates.Navigable.Fields.CustomClass]">
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
</li>
}
</ul>
If it generated, the result like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
<li class="content accent-4 z-depth-2 red" data-color="red">
<a class="" href="/Specialties/menu1">
<div class="icon"><img src="" /></div>
<div class="text">menu 1</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu2">
<div class="icon"><img src="" /></div>
<div class="text">menu 2</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu3">
<div class="icon"><img src=""/> </div>
<div class="text">menu 3</div>
</a>
</li>
</ul>
I want to tracking link click with google analytics. I try like this :
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)" onclick="ga('send', 'event', 'a', 'click');">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
But, it does not work. How can I solve this problem?

Can't get all html code by using execute_script in Python for web scraping

I am trying to get html code for web scraping using Python. I chose a website of the real estate agency.
Before doing onclick event of the button that change pages I need to get this element itself.
However buttons that let us go to the next or previous page (designed with symbols ">" and "<") are not displayed inside the code.
Could you please advice something on this issue.
Here is my code
from selenium import webdriver
from bs4 import BeautifulSoup as bs
import requests
browser = webdriver.Chrome()
url = "https://www.centris.ca/en/properties~for-sale?view=Thumbnail"
browser.get(url)
innerHTML = browser.execute_script("return document.body.innerHTML")
print(innerHTML)
You were almost there. You simply need to induce WebDriverWait for the desired elements to be visible and then extract the html / page source as follows:
Code Block:
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
options = Options()
options.add_argument("start-maximized")
options.add_argument("disable-infobars")
options.add_argument("--disable-extensions")
driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://www.centris.ca/en/properties~for-sale?view=Thumbnail")
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.wrapper.even.wrapper-results")))
print(driver.execute_script("return document.body.innerHTML"))
Console Output:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-558V6M" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NC4N8H6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<div id="site" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Centris.ca">
<meta content="https://www.facebook.com/centris.ca/" itemprop="sameAs">
<meta content="Centris.ca lists all of the properties for sale or rent by a real estate broker in Québec. Find your house, condo, lot, plex, business..." itemprop="description">
<header id="header">
<div id="header-wrapper" class="wrapper">
<div class="top-nav" role="navigation">
<a class="logo-container" itemprop="url" href="/en">
<img itemprop="logo" src="/master/images/logo-centris-small.gif" alt="Centris.ca">
<strong>The Largest Number of Homes for Sale</strong>
</a>
<nav class="menu-container">
<ul class="main-menu">
<li>
<a class="main-item" href="/en/buy">Buy</a>
<div class="submenu">
<ul class="purchase">
<li class="first"><span class="item-title">Find a property</span></li>
<li class="second"><span class="item-title">Buying with a broker</span></li>
<li class="third"><span class="item-title">Steps involved in buying</span></li>
<li class="fourth"><span class="item-title">Risks of buying without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/sell">Sell</a>
<div class="submenu">
<ul class="sale">
<li class="first"><span class="item-title">Selling with a broker</span></li>
<li class="second"><span class="item-title">Steps involved in selling</span></li>
<li class="third"><span class="item-title">Risks of selling without a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/my-real-estate-broker">My broker</a>
<div class="submenu">
<ul class="broker">
<li class="first"><span class="item-title">Find a broker</span></li>
<li class="second"><span class="item-title">The role of the broker</span></li>
<li class="third"><span class="item-title">The 10 qualities of a good broker</span></li>
<li class="fifth"><span class="item-title">What clients are saying</span></li>
<li class="last"><span class="item-title">Become a broker</span></li>
</ul>
</div>
</li>
<li>
<a class="main-item" href="/en/tools">Tools</a>
<div class="submenu">
<ul class="infos">
<li class="first"><span class="item-title">Community profile</span></li>
<li class="second"><span class="item-title">Real estate statistics</span></li>
<li class="third"><span class="item-title">Useful links</span></li>
<li class="fourth"><span class="item-title">Real estate blog</span></li>
<li class="last"><span class="item-title">Calculator</span></li>
</ul>
</div>
</li>
<li class="property-search-icon">Search</li>
</ul>
<ul class="right-menu">
<li class="my-position-link"><i></i>Nearby</li>
<li>
My account
</li>
<li>
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail"><span class="desktop">FR</span><span class="device">Français</span></a>
</li>
<li class="last-child">
<a class="btn-favorites favorites " href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="icon icon-fav enableHover"></span>
<span class="text">Favourites</span>
<span class="labelCount hidden"></span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="mobile-menu-container">
<li class="border">
My account
</li>
<li>
<div class="m-favorites">
<a class="m-fav-link link-disabled" href="/en/my-favourites?view=Thumbnail" title="See my favourites">
<span class="text">My favourites</span>
<span class="labelCount hidden"></span>
</a>
</div>
</li>
<li class="border">
Nearby
</li>
<li>
<div class="main-item">Buy</div>
<div class="submenu">
<ul>
<li>
Find a property
</li>
<li>
Buying with a broker
</li>
<li>
Steps involved in buying
</li>
<li>
Risks of buying without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">Sell</div>
<div class="submenu">
<ul>
<li>
Selling with a broker
</li>
<li>
Steps involved in selling
</li>
<li>
Risks of selling without a broker
</li>
</ul>
</div>
</li>
<li>
<div class="main-item">My broker</div>
<div class="submenu">
<ul>
<li>
Find a broker
</li>
<li>
The role of the broker
</li>
<li>
The 10 qualities of a good broker
</li>
<li>
What clients are saying
</li>
<li>
Become a broker
</li>
</ul>
</div>
</li>
<li class="border">
<div class="main-item">Tools</div>
<div class="submenu">
<ul>
<li>
Community profile
</li>
<li>
Real estate statistics
</li>
<li>
Useful links
</li>
<li>
Real estate blog
</li>
<li>
Calculator
</li>
</ul>
</div>
</li>
<li class="border">
<a class="lang" href="/fr/propriete~a-vendre?view=Thumbnail">Français</a>
</li>
<li>
Broker login
</li>
</ul>
</nav>
<div class="mobileMenuButtons">
<a class="searchLink icon-search" href="/en/properties~for-sale?view=Thumbnail&OpenSearchPanel=true" aria-label="Search"></a>
<div class="menuToggle icon-menu " aria-label="Toggle navigation"></div>
</div>
</div>
<div id="search-block" role="search" class="region" style="display: none">
<div id="search-form">
<fieldset>
<fieldset class="search-field">
<div class="ie-search fields-container">
<label id="labelSearch" for="search">Search by City, Neighbourhood, Region, Address or Centris<sup>®</sup> No.</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="search" name="search" id="search" class="focus ui-autocomplete-input" autocomplete="off">
</div>
<button id="submit-search" class="btn btn-search">Search</button>
</fieldset>
<div id="freeform-filters" class="filters-list">
<ul></ul>
</div>
<!-- Price -->
<fieldset id="price" class="fieldset">
<legend class="none">Price</legend>
<div class="control-group slide">
<div class="controls">
<div id="slider" data-min-price="0" data-max-price="999999999" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
<div id="slider-value"><span id="currentPrixMin" data-value="0" style="position: relative; top: 0px; left: 0px;">$0</span><span id="currentPrixMax" data-value="999999999" style="position: relative; top: 0px; left: 0px;"><span>$20,000,000+</span></span></div>
</div>
</div>
</fieldset>
<!-- Residentiel/Commerciel, Vendre/Louer -->
<fieldset id="property-category" class="fieldset">
<legend class="none">Catégorie</legend>
<div class="control-group">
<div class="control-radio first">
<button id="residentiel" class="btn btn-check active">Residential</button>
<button id="commercial" class="btn btn-check">Commercial</button>
</div>
<div class="control-radio">
<button id="avendre" class="btn btn-check active">For sale</button>
<button id="alouer" class="btn btn-check">For rent</button>
</div>
</div>
</fieldset>
<a id="btn-advanced-criterias" class="link-more-below" href="javascript:;" style="display: none;">ADVANCED CRITERIA<i></i></a>
</fieldset>
<fieldset id="container-advanced-criterias">
<!-- PropertyTypes -->
<fieldset class="fieldset fieldset-border" id="LegendItemProperty">
<legend class="none">Property type<i class="btn-toggle"></i></legend>
<div id="item-property" class="control-select-inline container-fieldset">
<button class="btn-form-choice" data-value="A">Single-family home</button>
<button class="btn-form-choice" data-value="B">Condo</button>
<button class="btn-form-choice" data-value="C">Loft / Studio</button>
<button class="btn-form-choice" data-value="D">Condominium home</button>
<button class="btn-form-choice" data-value="E">Plex</button>
<button class="btn-form-choice" data-value="F">Intergenerational</button>
<button class="btn-form-choice" data-value="G">Mobile home</button>
<button class="btn-form-choice" data-value="H">Hobby farm</button>
<button class="btn-form-choice" data-value="I">Lot</button>
<button class="btn-form-choice" data-value="J" style="display: none;">Multi-Family</button>
<button class="btn-form-choice" data-value="K" style="display: none;">Office</button>
<button class="btn-form-choice" data-value="L" style="display: none;">Industrial</button>
<button class="btn-form-choice" data-value="M" style="display: none;">Commercial</button>
<button class="btn-form-choice" data-value="N" style="display: none;">Accommodation</button>
<button class="btn-form-choice" data-value="O" style="display: none;">Agricultural</button>
<button class="btn-form-choice" data-value="P" style="display: none;">Lot</button>
<button class="btn-form-choice" data-value="Q" style="display: none;">Business</button>
</div>
</fieldset>
<!-- FEATURES SECTION -->
<fieldset class="fieldset-border" id="CharacteristicsSection">
<legend>Features<i class="btn-toggle"></i></legend>
<div class="container-fieldset">
<!-- DROPDOWNS - FEATURES SECTION -->
<fieldset id="fdChambreStat">
<legend></legend>
<div class="control-group caracteristics">
<div class="controls">
<!-- Chambres -->
<div class="control-select" id="select-room" tabindex="-1" data-visiblity-name="Rooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bedrooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bedrooms</li>
<li class="option" data-option-value="1">1 bedroom</li>
<li class="option" data-option-value="1+">1 bedroom or +</li>
<li class="option" data-option-value="2">2 bedrooms</li>
<li class="option" data-option-value="2+">2 bedrooms or +</li>
<li class="option" data-option-value="3">3 bedrooms</li>
<li class="option" data-option-value="3+">3 bedrooms or +</li>
<li class="option" data-option-value="4">4 bedrooms</li>
<li class="option" data-option-value="4+">4 bedrooms or +</li>
<li class="option" data-option-value="5">5 bedrooms</li>
<li class="option" data-option-value="5+">5 bedrooms or +</li>
</ul>
</div>
</div>
<!-- Salle de bain/eau -->
<div class="control-select" id="select-bathroom" tabindex="-1" data-visiblity-name="Bathrooms"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of bath/powder rooms</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of bath/powder rooms</li>
<li class="option" data-option-value="1">1 bath/powder room or +</li>
<li class="option" data-option-value="2">2 bath/powder rooms or +</li>
<li class="option" data-option-value="3">3 bath/powder rooms or +</li>
<li class="option" data-option-value="4">4 bath/powder rooms or +</li>
<li class="option" data-option-value="5">5 bath/powder rooms or +</li>
</ul>
</div>
</div>
<!-- Stationnement -->
<div class="control-select" id="select-stationnement" tabindex="-1" data-visiblity-name="Stationnement"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of parking spaces</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of parking spaces</li>
<li class="option" data-option-value="1">1 parking or +</li>
<li class="option" data-option-value="2">2 parkings or +</li>
<li class="option" data-option-value="3">3 parkings or +</li>
<li class="option" data-option-value="4">4 parkings or +</li>
<li class="option" data-option-value="5">5 parkings or +</li>
</ul>
</div>
</div>
<!-- Garage -->
<div class="control-select" id="select-garage" tabindex="-1" data-visiblity-name="Garage"> <div class="selectarea" tabindex="-1"> <div class="arrow" style=""> <b style=""></b> </div> <div class="text" style=""><span class="singleSelectSpan">Number of garages</span> </div> </div>
<div class="dropdown" tabindex="-1" style="display: none;">
<ul>
<li class="option active" data-option-value="0">Number of garages</li>
<li class="option" data-option-value="1">1 garage or +</li>
<li class="option" data-option-value="2">2 garages or +</li>
<li class="option" data-option-value="3">3 garages or +</li>
<li class="option" data-option-value="4">4 garages or +</li>
<li class="option" data-option-value="5">5 garages or +</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
<!-- CHECKBOXS - FEATURES SECTION -->
<fieldset id="fsCaracAutre">
<legend></legend>
<div class="control-group">
<ul class="checkbox-list">
<!-- Specs -->
<li data-visiblity-name="Piscine">
<input type="checkbox" id="chk-piscine"><i></i><label for="chk-piscine" class="checkbox">Pool<span id="spanchk-piscine"></span></label>
</li>
<li data-visiblity-name="Ascenseur">
<input type="checkbox" id="chk-ascenseur"><i></i><label for="chk-ascenseur" class="checkbox">Elevator<span id="spanchk-ascenseur"></span></label>
</li>
<li data-visiblity-name="Apmr">
<input type="checkbox" id="chk-apmr"><i></i><label for="chk-apmr" class="checkbox">Adapted for reduced mobility<span id="spanchk-apmr"></span></label>
</li>
<li data-visiblity-name="BordEau">
<input type="checkbox" id="chk-bordeau"><i></i><label for="chk-bordeau" class="checkbox">Waterfront<span id="spanchk-bordeau"></span></label>
</li>
<li data-visiblity-name="AccesEau">
<input type="checkbox" id="chk-acceseau"><i></i><label for="chk-acceseau" class="checkbox">Access to waterfront<span id="spanchk-acceseau"></span></label>
</li>
<li data-visiblity-name="PlanEauNavigable">
<input type="checkbox" id="chk-planeaunavigable"><i></i><label for="chk-planeaunavigable" class="checkbox">Navigable body of water<span id="spanchk-planeaunavigable"></span></label>
</li>
<li data-visiblity-name="Meuble" style="display: none;">
<input type="checkbox" id="chk-meuble"><i></i><label for="chk-meuble" class="checkbox">Furnished<span id="spanchk-meuble"></span></label>
</li>
<li data-visiblity-name="SemiMeuble" style="display: none;">
<input type="checkbox" id="chk-semimeuble"><i></i><label for="chk-semimeuble" class="checkbox">Semi-furnished<span id="spanchk-semimeuble"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeHebergement" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-hebergement" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="HOTEL" data-value="HOTEL"><i></i><label for="HOTEL" class="checkbox">Hotel<span id="spanTypeHebergementHOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="MOTEL" data-value="MOTEL"><i></i><label for="MOTEL" class="checkbox">Motel<span id="spanTypeHebergementMOTEL"></span></label>
</li>
<li>
<input type="checkbox" id="AUBERGE" data-value="AUBERGE"><i></i><label for="AUBERGE" class="checkbox">Inn<span id="spanTypeHebergementAUBERGE"></span></label>
</li>
<li>
<input type="checkbox" id="MAISONRETR" data-value="MAISONRETR"><i></i><label for="MAISONRETR" class="checkbox">Seniors' residence<span id="spanTypeHebergementMAISONRETR"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeHebergementAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="TypeExploitation" style="display: none;">
<legend></legend>
<div class="control-group">
<ul id="type-exploitation" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ELEVAGE" data-value="ELEVAGE"><i></i><label for="ELEVAGE" class="checkbox">Animal husbandry<span id="spanTypeExploitationELEVAGE"></span></label>
</li>
<li>
<input type="checkbox" id="APICULTURE" data-value="APICULTURE"><i></i><label for="APICULTURE" class="checkbox">Beekeeping<span id="spanTypeExploitationAPICULTURE"></span></label>
</li>
<li>
<input type="checkbox" id="FERMELAIT" data-value="FERMELAIT"><i></i><label for="FERMELAIT" class="checkbox">Dairy farm<span id="spanTypeExploitationFERMELAIT"></span></label>
</li>
<li>
<input type="checkbox" id="SERRES" data-value="SERRES"><i></i><label for="SERRES" class="checkbox">Greenhouses<span id="spanTypeExploitationSERRES"></span></label>
</li>
<li>
<input type="checkbox" id="HORTICOLE" data-value="HORTICOLE"><i></i><label for="HORTICOLE" class="checkbox">Horticulture<span id="spanTypeExploitationHORTICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="ERABLIERE" data-value="ERABLIERE"><i></i><label for="ERABLIERE" class="checkbox">Maple forest<span id="spanTypeExploitationERABLIERE"></span></label>
</li>
<li>
<input type="checkbox" id="PEPINIERE" data-value="PEPINIERE"><i></i><label for="PEPINIERE" class="checkbox">Nursery (tree)<span id="spanTypeExploitationPEPINIERE"></span></label>
</li>
<li>
<input type="checkbox" id="VERGER" data-value="VERGER"><i></i><label for="VERGER" class="checkbox">Orchard<span id="spanTypeExploitationVERGER"></span></label>
</li>
<li>
<input type="checkbox" id="EQUESTRE" data-value="EQUESTRE"><i></i><label for="EQUESTRE" class="checkbox">Riding centre<span id="spanTypeExploitationEQUESTRE"></span></label>
</li>
<li>
<input type="checkbox" id="MARAICHERE" data-value="MARAICHERE"><i></i><label for="MARAICHERE" class="checkbox">Vegetable farm<span id="spanTypeExploitationMARAICHERE"></span></label>
</li>
<li>
<input type="checkbox" id="VIGNOBLE" data-value="VIGNOBLE"><i></i><label for="VIGNOBLE" class="checkbox">Winery<span id="spanTypeExploitationVIGNOBLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanTypeExploitationAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="Zonage" style="display: none;">
<div class="control-group">
<ul id="zonage" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="RESI" data-value="RESI"><i></i><label for="RESI" class="checkbox">Residential zoning<span id="spanZonageRESI"></span></label>
</li>
<li>
<input type="checkbox" id="COMM" data-value="COMM"><i></i><label for="COMM" class="checkbox">Commercial zoning<span id="spanZonageCOMM"></span></label>
</li>
<li>
<input type="checkbox" id="INDS" data-value="INDS"><i></i><label for="INDS" class="checkbox">Industrial zoning<span id="spanZonageINDS"></span></label>
</li>
<li>
<input type="checkbox" id="AGR" data-value="AGR"><i></i><label for="AGR" class="checkbox">Agricultural zoning<span id="spanZonageAGR"></span></label>
</li>
<li>
<input type="checkbox" id="FORE" data-value="FORE"><i></i><label for="FORE" class="checkbox">Forest zoning<span id="spanZonageFORE"></span></label>
</li>
<li>
<input type="checkbox" id="VILG" data-value="VILG"><i></i><label for="VILG" class="checkbox">Resort zoning<span id="spanZonageVILG"></span></label>
</li>
<li>
<input type="checkbox" id="RECR" data-value="RECR"><i></i><label for="RECR" class="checkbox">Recreational and tourism zoning<span id="spanZonageRECR"></span></label>
</li>
<li>
<input type="checkbox" id="AUT" data-value="AUT"><i></i><label for="AUT" class="checkbox">Other zoning<span id="spanZonageAUT"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="SecteurActivite" style="display: none;">
<div class="control-group">
<ul id="secteur-activite" class="checkbox-list controls checkboxes">
<li>
<input type="checkbox" id="ALIM" data-value="ALIM"><i></i><label for="ALIM" class="checkbox">Food services<span id="spanSecteurActiviteALIM"></span></label>
</li>
<li>
<input type="checkbox" id="REST" data-value="REST"><i></i><label for="REST" class="checkbox">Restaurant industry<span id="spanSecteurActiviteREST"></span></label>
</li>
<li>
<input type="checkbox" id="HEBERGEMENT" data-value="HEBERGEMENT"><i></i><label for="HEBERGEMENT" class="checkbox">Accomodation<span id="spanSecteurActiviteHEBERGEMENT"></span></label>
</li>
<li>
<input type="checkbox" id="VENDET" data-value="VENDET"><i></i><label for="VENDET" class="checkbox">Retail Sales<span id="spanSecteurActiviteVENDET"></span></label>
</li>
<li>
<input type="checkbox" id="SERVICE" data-value="SERVICE"><i></i><label for="SERVICE" class="checkbox">Service<span id="spanSecteurActiviteSERVICE"></span></label>
</li>
<li>
<input type="checkbox" id="FAB" data-value="FAB"><i></i><label for="FAB" class="checkbox">Manufacturing<span id="spanSecteurActiviteFAB"></span></label>
</li>
<li>
<input type="checkbox" id="AGRICOLE" data-value="AGRICOLE"><i></i><label for="AGRICOLE" class="checkbox">Agricultural<span id="spanSecteurActiviteAGRICOLE"></span></label>
</li>
<li>
<input type="checkbox" id="AU" data-value="AU"><i></i><label for="AU" class="checkbox">Other<span id="spanSecteurActiviteAU"></span></label>
</li>
</ul>
</div>
</fieldset>
<fieldset data-visiblity-name="GenreCommerce" style="display: none;">
<div class="field-focus">
<label for="genre-commerce">Type of business</label>
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input id="genre-commerce" class="focus dropdown ui-autocomplete-input" autocomplete="off">
<div id="genreCommerce-filters" class="filters-list">
<ul></ul>
</div>
<ul style="display:none"></ul>
</div>
</fieldset>
</div>
</fieldset>
One can click a link without seeing its content simply by using following line of code:
browser.find_element_by_xpath("//li[#class='next']/a").click()

jQuery move/prepend html text in a list not working

I would like to move / prepend each list item text (Brochure A, Brochure B etc) from wpdf_file_name class to the row_downloadbutton > a then remove row_filename
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-A.pdf" target="_blank">Download</a></div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-B.pdf" target="_blank">Download</a></div>
</li>
<li class="clearfix">
...
</li>
<li class="clearfix">
...
</li>
</ul>
This is my jQuery:
jQuery(".row_downloadbutton>a").each(function(){
jQuery(this).prepend(jQuery('.wpdf_file_name').html());
});
jQuery(".row_filename").remove();​
However only Brochure A is getting repeated to the row_downloadbutton..not Brochure B, Brochure C etc etc
I have tried .children(), .siblings(), .closest() but not working.
Thanks!
For each download link, get the .closest() common parent (could be .clearfix or li or both in your case), then .find() the corresponding .wpdf_file_name :
(function($) {
$(".row_downloadbutton > a").each(function() {
$(this).prepend(
$(this).closest('li.clearfix').find('.wpdf_file_name').html()
);
});
$(".row_filename").remove();
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton">
<a class="pdf" href="Brochure-A.pdf" target="_blank">
Download
</a>
</div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton">
<a class="pdf" href="Brochure-B.pdf" target="_blank">
Download
</a>
</div>
</li>
</ul>
You can use closest and find like this:
jQuery(this).prepend(jQuery(this).closest('li').find('.wpdf_file_name').html());
See demo below:
jQuery(".row_downloadbutton>a").each(function() {
jQuery(this).prepend(jQuery(this).closest('li').find('.wpdf_file_name').html());
});
jQuery(".row_filename").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wpdf-list-style">
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure A</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-A.pdf" target="_blank">Download</a>
</div>
</li>
<li class="clearfix">
<div class="row_filename">
<p class="wpdf_file_name">Brochure B</p>
</div>
<div class="row_downloadbutton"><a class="pdf" href="Brochure-B.pdf" target="_blank">Download</a>
</div>
</li>
<li class="clearfix">
...
</li>
<li class="clearfix">
...
</li>
</ul>

slides 2 divs at the same time jQuery

Im planning on slidding 2 divs at the same time ,each one in opposite directions.How can i do this?
this is what i have tried
$("button").click(function () {
$(".cuadro").animate({ left: '250px', queue: false });
$("#R").animate({ left: '-250px', queue: false });
});
also if it's possible i can this to happend when my services tab is active instead of when the person click on the button.
<section id="services" class="content-section text-center">
<div class="services-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2><span class="auto-style2">Services</span></h2>
<h2> </h2>
<h2><strong>Technlogies and lenguages used for software developing<br />
</strong></h2>
<p class="btn btn-default btn-lg">Download Resume</p>
<p> </p>
<button id="serv">serv</button>
</div>
<div class="col-lg-9">
<div class="cuadro" id="L"><h2 class="leng">C#</h2></div>
</div>
<div class="col-lg-3">
<div class="cuadro" id="R"><h2 class="leng">JavaScript</h2></div>
</div>
</div>
</div>
</section>
this is my nav bar
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav" id="tabs">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
HOME
</li>
<li>
<a class="page-scroll" href="#about">ABOUT</a>
</li>
<li>
<a class="page-scroll" href="#download">RESUME</a>
</li>
<li>
<a class="page-scroll" id="serTab" href="#services">SERVICES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
</div>
This should do it:
$('#tabs').tabs();
$('#serTab').click(function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Note that id="tabs" must be moved from the <ul> to its parent <div>
If that doesn't work, you may need event delegation. Try this:
$(document).on('click', '#serTab', function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Reference:
http://davidwalsh.name/event-delegate

Menu items not showing up properly as a mega menu

I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.
Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}

Categories