this.faqLogic = function()
{
$('a .toggle').click(function(){
$('this .answer').show();
});
};
HTML:
<li class="clearfix question">
<a class="toggle" href="#">>
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
There are multiple questions/answers of course. I just cant understand as to why it won't work at all. I'm getting no errors and required dependencies (jquery) are installed and called in first.
Any ideas?
Because you're trying to select elements of class .answer that are children of a <this> element. Clearly you have no <this> element.
Also, because you have a space between a .toggle, you're selecting elements of class .toggle that are children of an a element. You want a element that have class .toggle. No space for that selector, so it would be a.toggle.
All in all, perhaps you meant:
$('a.toggle').click(function(){
$('.answer').show();
});
I suggest that you take a read of how CSS selectors work in general. Your understanding could do with a bit of firming-up.
$('.toggle').click(function(){
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
<a class="toggle" href="#">
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
Related
So I am trying to get the firebase link that the user has provided and make it a clickable link. I have this so far
<li>
<div class="collapsible-header grey lighten-4">${forum.title}</div>
<div class="collapsible-body white">
${forum.content} <br />
<p>${forum.link}</p>
</div>
</li>
I want to make forum.link clickable but don't know how to add a href before a variable.
Thanks
Can you try this:
<div class="collapsible-body white">
${forum.content} <br/>
<p>
Link Description
</p>
</div>
I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks
To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');
I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })
I´ve got code:
<div class="gridContainer clearfix">
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg4 bleft">
<div class="heading">Hello!</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Title</h2>
<p>text</p>
</div>
</li>
</ul>
</div>
</div>
and I need to change text on Hello! on Title and on text. How I could select tags with multiple classes and id's? the codes:
document.getElementsByClassName('bg4 bleft heading').innerHTML="bla";
document.getElementsByClassName('description').innerHTML="bla";
doesn´t work
Thanks!
Use :
document.getElementsByClassName('accordion bg4 heading').innerHTML="bla";
You need not add same classes of a particular html element as you did, but rather use a hierarchal way like above so that you can pin-point the element you need to focus.
I am trying to access curr-dish and sub-dish class using jquery of third dish-wrapper div class...
how to access it since all three divs have same class
i want to access only third div...
i dont want to add any ids to the div..
providing my code below
<span class="status">
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
</span>
you can
$('.dish-wrapper:eq(2) .curr-dish.sub-dish')
You can use :eq to get element at particular location the and combine classes using dot .
$('.dish-wrapper:eq(2)').find(' curr-dish.sub-dish');
To access the last element you can use :last or .last()
$('.dish-wrapper:last').find(' curr-dish.sub-dish');
Using :eq() is best way to access the third element like what others said. To access the curr-div and curr-dish sub-dish seperately, use can use the following:
$('.dish-wrapper:eq(2)').find('.curr-div');
$('.dish-wrapper:eq(2)').find('.sub-dish');
or collectively:
$('.dish-wrapper:eq(2)').find('.sub-dish,.curr-div');
NOTE: Please specify the class name without spaces so that it helps to access it in jquery/javascript. Ex. Here "curr-dish sub-dish" class name is not allowing to search for the class name precisely, able to check only the last part of the class name.
Good Luck!