Develop Reference

Doing slideToggle and toggleClass at the same time

I'm trying to do a slideToggle and a toggleClass at the same time:
css
li ul { display: none; }
html
<li>
<div class="group"><i class="arrow_maximize"></i> Title</div>
<ul>
<li>anything</li>
</ul>
</li>
js
'click .group': function (event) {
$(event.currentTarget).next('ul').slideToggle(200);
$(event.currentTarget).children('i').toggleClass('arrow_minimize');
}
What I try to get is:
Clicking on .group will slideDown the ul; at the same time the class of i should be changed to 'arrow_minimize'.
Clicking again should set it back: slideUp of ul, change class of i to 'arrow_maximize'

In the toggleClass you also need to specify the other class which the element already has:
$(function(){
$('.group').on('click', function(){
$(this).next('ul').slideToggle(200);
$(this).children('i').toggleClass('arrow_minimize arrow_maximize');
});
});
li ul { display: none }
i.arrow_maximize:before { content: "\25ba" }
i.arrow_minimize:before { content: "\25bc" }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<div class="group"><i class="arrow_maximize"></i> Title</div>
<ul>
<li>anything</li>
</ul>
</li>

Javascript/jQuery cancel a function in another

I have a function that on hover, it shows the image next to the list item. That works fine. However, I need to have it so that when the user clicks the link, the image stays there. As of right now when the user clicks the link the hover function still prevails and the image will only show if the link is being hovered over.
$('[href]').hover(function() {
$(this).closest('li').prev('li').removeClass('hidden');
}, function() {
$(this).closest('li').prev('li').addClass('hidden');
});
$('[href]').click(function(ev) {
ev.preventDefault();
$(this).closest('li').prev('li').removeClass('hidden');
});
ul, li {
list-style: none;
display: inline-block;
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidden"><img src="https://placehold.it/30x30" /></li>
<li>Link</li>
</ul>

This happening because hover overwrites click. I create this solution so when click the link the image remains visible:
var clickHref = false;
$('[href]').hover(function() {
$(this).closest('li').prev('li').removeClass('hidden');
}, function() {
if (!clickHref)
$(this).closest('li').prev('li').addClass('hidden');
});
$('[href]').click(function(ev) {
ev.preventDefault();
$(this).closest('li').prev('li').removeClass('hidden');
clickHref = !clickHref;
});
ul,
li {
list-style: none;
display: inline-block;
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidden">
<img src="https://placehold.it/30x30" />
</li>
<li>Link
</li>
</ul>

Probably the off method fit your needs:
$('[href]').click(function(ev) {
ev.preventDefault();
$(this).off("mouseenter mouseleave").closest('li').prev('li').removeClass('hidden');
});

text on anchor changes when hover

Is it possible to change the content of an anchor when hovered? i have this sample fiddle
i want to change the about anchor to some like My bio when hovered. and something else also for the home. the content attribute doesn't seem to work well with this.
HTML:
<ul>
<li>About</li>
<li>Home</li>
</ul>
CSS:
ul { list-style: none; }
ul li a:hover { color: red; content: 'Content'; }

"content property is used with the :before and :after pseudo-elements, to insert generated content." not with normal elements.
Reference: http://www.w3schools.com/cssref/pr_gen_content.asp
You can change it using jQuery:
$('li a').mouseenter(function(){
$(this).data('text', $(this).text());
$(this).text('Content');
}).mouseleave(function(){
$(this).text($(this).data('text'));
});
http://jsfiddle.net/TrueBlueAussie/s6ao29eg/2/
This version simply saves the text to data on the element on mouseenter, and restores it on mouseleave. You can also use hover passing the same two functions.
e.g.
$('li a').hover(function(){
$(this).data('text', $(this).text()).text('Content');
}, function(){
$(this).text($(this).data('text'));
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/s6ao29eg/5/
I notice several other clever CSS-only solutions have been provided, so the choice depends on how much you can change your content, vs adding code.
If you want different text, use a data attribute:
<li>About</li>
e.g.
$('li a').hover(function(){
$(this).data('text', $(this).text()).text($(this).data('content'));
}, function(){
$(this).text($(this).data('text'));
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/s6ao29eg/8/
Update to use a transition (fade) as requested:
$('li a').hover(function(){
$(this).stop(true,true).fadeOut(function(){
$(this).data('text', $(this).text()).text($(this).data('content')).fadeIn();
});
}, function(){
$(this).stop(true,true).fadeOut(function(){
$(this).text($(this).data('text')).fadeIn();
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/s6ao29eg/10/
Further update now the rules have changed :)
As the HTML content apparently cannot be modified, use the index position of the LI combined with an array of text items:
var content = ["About me!", "My home!"];
$('li').hover(function(){
var $a = $('a', this);
$a.stop(true,true).fadeOut(function(){
$a.data('text', $a.text()).text(content[$(this).index()]).fadeIn();
});
}, function(){
var $a = $('a', this);
$a.stop(true,true).fadeOut(function(){
$a.text($a.data('text')).fadeIn();
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/s6ao29eg/11/
Credit to #MariaMadalina who used an array before even knowing the HTML could not be modified :)

Really sounds like a job for JS. CSS only solution via pseudo elements:
http://jsfiddle.net/qpdoby91/
.about:before { content: 'About'; }
.home:before { content: 'Home'; }
ul li a:hover:before { content: 'Content'; }
JavaScript Solution: http://jsfiddle.net/bctaxauo/1/
$('ul li a').hover(function() {
$(this).data('prevText', $(this).text()).text('New Content!');
}, function() {
$(this).text($(this).data('prevText');
});

Just hide "hover text" when in normal state and switch display when on hover:
.menu li:hover .unhover {
display: none;
}
.menu li:hover .hover {
display: inline;
}
.menu li .unhover {
display: inline;
}
.menu li .hover {
display: none;
}
<ul class="menu">
<li>
<a href="#">
<span class="unhover">Home</span>
<span class="hover">Visit home</span>
</a>
</li>
</ul>

Made a jquery snippet
$('li#about').hover(function() {
$("a", this ).text( "something" );
}, function() {
$("a", this ).text( "About" );
});
Take a look here http://jsfiddle.net/s6ao29eg/3/
EDIT:
I made some modifications towards a more scalable solution.
var replacementText=["Something 1","Something 2"];
$('li').hover(function() {
var myindex = $(this).index();
var myText=replacementText[myindex];
$("a", this).data('original', $("a",this).text()).text(myText);
}, function() {
var myindex = $(this).index();
$("a",this).text($("a",this).data('original'));
});
http://jsfiddle.net/s6ao29eg/9/

You can, but you have to use the :before and :after pseudo-elements, and a little color trick to hide the original text.
ul li a:hover {
color: transparent;
}
ul li a:hover:before {
content: "Content";
position: absolute;
color: red;
}
Just by the way, why would you want to use a <ul> to nest your <a> elements? You are removing all styles from the list anyway. Most of the time, what you need is just well-styled <a> tags; only nest them in a list if you're structuring the data as a list, which means you likely want to have something like bullet points preceding each li.

Simple Css only solution
HTML
<ul>
<li> <span class="visible">About</span> <span class="hover"> My Bio</span> </li>
</ul>
Css
ul { list-style: none; }
ul li a span.hover{
display:none;}
ul li a:hover span.hover{
display:block;
}
ul li a:hover span.visible{
display:none;
}

You can also do it using jQuery.
Add an id to your li as:
<li>About
and add this jQuery code
$(document).ready(function(){
$('#about').hover(function(){
$(this).text('');
$(this).text('My Bio');
});
$('#about').mouseout(function(){
$(this).text('');
$(this).text('about');
});
});
Fiddle link is:http://jsfiddle.net/sonam185/w5fh140q/
or also do like this if you have multiple li's
http://jsfiddle.net/sonam185/gayph16x/

How to change arrow icon once click dropdown

HTML:
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
CSS:
.selectcontainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
}
.selectcontainer ul li:not(.init){
display:none;
float:left;
}
li.init{cursor:pointer; background:url("../images/arrow-down.png") right no-repeat;}
li.init1 { cursor: pointer; background:url("../images/arrow-up.png") right no-repeat;}
JQuery:
jQuery(document).ready(function () {
$( "ul" ).click(function() {
$(this).closest("ul").children('li:not(.init)').slideToggle(200);
});
$( "li" ).click(function() {
$("li .init").addClass("li .init1");
});
});
Hi I just have to change my image when dropdown is open up arrow and when close down arrow.
This code is not working please help.

Solved:
You were not toggling "init1" class (first <li>) on click of <ul>, so your arrows were not changing on click.
$("ul").click(function () {
$(this).children('li:not(.init)').slideToggle(200);
$(this).find("li.init").toggleClass("init1");
});
Below is the JS fiddle working example, i have used special characters and :after pseudo class for up/down arrows , you can change as it suits you.
http://jsfiddle.net/4C5ND/

SO simple .U could use transform:rotate(180deg); CSS on click.

You could try:
if($(this).hasClass("class1")){
$(this).removeClass("class1").addClass("class2");
}else{
$(this).removeClass("class2").addClass("class1");
}

how to toggle visibility of div on mouseover of another a tag

I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
http://www.bt.com/help/home/
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});

You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter mouseenter event will be fired only when you entering the element but not move within element.
This is the solution you want. It is almost similar to the site you provided.
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/

I got it, slight changes in selectors
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});

$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
LINK
<div id="DIV" style="display:none">Your content in it</div>

This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenter event, this class then makes the hidden <ul> in the div show up due to.
.shown ul{
display: block !important;
}
http://jsfiddle.net/28bb8/2/
EDIT:
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});

You don't need Javascript here. This is possible with CSS alone
HTML:
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddle for playing.

i hope this is the solution you're seaching for.
Just place the following code below your <body> tag:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>