Can someone help me with this. I need to show course description hidden inside a div when user clicks on the course link and toggle after any link is clicked
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.CourseID)
</td>
<td>
<a title="Click to See Course Description" class="info" id="#Html.DisplayFor(modelItem => item.Title)" href="#">#Html.DisplayFor(modelItem => item.Title)</a>
</td>
}
<div class="myshow" id="Calculus_show" style="display:none">
<p>
Information about a Course
</p>
</div>
and I have my js code
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$(id).toggle();
})
});
Here div.myshow does not show on toggle.
You can try something like this:
First find all div that are visible, hide them. Then using this, navigate to necessary div and show it.
$(".action").on("click", function(){
var self = this;
$(".info:visible").fadeOut(function(){
$(self).parent().find(".info").fadeIn();
});
});
.tile, .info{
font-weight:bold;
padding:5px;
margin:5px;
border:gray;
}
.info{
color:#333;
background:#ddd;
display:none;
}
.visible{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tile">
<a class="action" onclick="show(1)">Show 1</a>
<div class="info visible">Information of 1</div>
</div>
<div class="tile">
<a class="action" onclick="show(2)">Show 2</a>
<div class="info">Information of 2</div>
</div>
<div class="tile">
<a class="action" onclick="show(3)">Show 3</a>
<div class="info">Information of 3</div>
</div>
<div class="tile">
<a class="action" onclick="show(4)">Show 4</a>
<div class="info">Information of 4</div>
</div>
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$(id).toggle();
})
});
Just replace above code with below code, problem is that you are adding # in the id attribute itself instead of selector.
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$('#' + id).toggle();
})
});
Hope this helps.
It looks like on the "$('div.myshow')" line you are changing the ID of the div to have a # in it for no reason, which is causing the script to break. I simply commented it out and it gave me the results you are wanting. A hide to the myshow div was also added so when a course is selected, then another course is selected, it hides the previous courses div and opens the new one's. I assumed that everything being generated in the HTML is coming out correctly when I made this.
Modified the code to show how it would work with multiple links.
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
//$('div.myshow').attr('id', id);
$('.myshow').hide();
$(id).toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
1234
</td>
<td>
<a title="Click to See Course Description" class="info" id="Calculus" href="#">Calculus</a>
</td>
</tr>
<tr>
<td>
1234
</td>
<td>
<a title="Click to See Course Description" class="info" id="Programming" href="#">Programming</a>
</td>
</tr>
</table>
<div class="myshow" id="Calculus_show" style="display:none">
<p>
Information about Calculus
</p>
</div>
<div class="myshow" id="Programming_show" style="display:none">
<p>
Information about Programming
</p>
</div>
Related
I am quite new to jquery, so please excuse me if I'm doing something stupid:
I have a table where each td belongs to the same class "original" and each one has a unique id.
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
...
...
</table>
I also have a div where all elements are part of a separate class "onclick" and each element has another unique id that is connected to each td from the table.
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
...
...
</div>
When I click on each individual td, I want to display its corresponding div, so if I click on "1" then "1click" shows up. I currently have this jquery code that successfully does this, but only for the first pair of elements, so it doesn't work for anything beyond id="1" and id="1click".
$(function () {
$(".original").click(function() {
var divname = this.id;
if ($(".onclick").attr("id") == divname + 'click'){
var clickname= "#" + divname + "click";
if ($(".hide").css("display") == 'none'){
$(clickname).toggle();
}
}
}
}
How can I make it so that it searches each element of the table to find a match with each element of the div?
Thanks, and sorry if this is a stupid mistake.
I'm finding it difficult understanding what you're trying to do and would love to help but I need to try and understand it better.
1) You can search using .each() which will scan all the elements and you can use a conditional statement to find the one which is needed: I.e.
$(document).ready(function(){
$("td").each(function() {
if ($(this).attr("id") == "2") {
var element = $("#"+$(this).attr("id")+"click");
// do stuff with element
}
})
});
I created a small example which I think helps your scenario on JSFiddle: https://jsfiddle.net/keuhfu36/
$(document).ready(function(){
$("#i2click").click(function() {
alert("hello");
});
$("td").each(function() {
if ($(this).attr("id") == "i2") {
$("#"+$(this).attr("id")+"click").click();
}
});
});
2) I recommend you change the div values from id='1' and id='2' like i did in the example to a value which starts with a letter i.e id="i1" and id="i2" which makes it a lot less of a pain to work with.
Your script should be like ,
$(".original").click(function() {
var divId = this.id,
targetDiv = $("#"+divId+"click");
$(".onclick:visible").hide();
targetDiv.show();
});
Try the following code:
$(function(){
$('.onclick').hide();
$(".original").click(function() {
var divname = this.id;
$('#'+divname+'click').toggle();
});
});
$(function () {
$(".original").click(function() {
// Targeted Div Name
var divname = "#"+ $(this).attr('id') + "click";
// Toggle the div, as Id would be unique in the page
$(divname).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
</table>
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
</div>
IMHO, you should ditch the IDs altogether and just use the classes along with their indexes to achieve the desired effect much simpler, like this:
$('#main').on('click', '.original', function() {
var index = $('.original').index($(this)); // find the index of the clicked td
$('.onclick').hide().eq(index).show(); // hide all the divs then show the one at the same index as the clicked td
})
.on('click', '.close', function() {
$('.onclick').hide(); // hide all the divs when "close" is clicked
});
.onclick {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original">
one
</td>
<td style="cursor: pointer" class="original">
two
</td>
</tr>
... ...
</table>
<div id="second">
<div class="onclick">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
... ...
</div>
I have this html
<div class="1" style="" title="NeedthisText TextIDontneed">
<div class="2">
<div class="3">
<a target="_blank" href="/NeedToChange/DispForm.aspx?ID=1">Link</a>
</div>
</div>
</div>
I want to know how can I change "/NeedToChange/" part of the href depending if the title value of the div with class="1" contains some text I need.
Any Help will be greatly appreciated
Classes cannot start with Number! (JS might work but CSS will fail and your document will not validate.)
if "NeedToChange" is something you cannot control you can Regex target and replace any text between slash characters /unknownFolder/, /anything/
$(".1[title]").each(function(){
var title = this.title.split(" ")[0]; // Get only 1st part of title
$(this).find(".3 a").attr("href", function(idx, val){
return val.replace(/^\/([^\/]+)/, "/"+title);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1" style="" title="SomeText1 I_DONT NEED this">
<div class="2">
<div class="3">
<a target="_blank" href="/NeedToChange/DispForm.aspx?ID=1">Link ID=1</a>
</div>
</div>
</div>
<div class="1" style="" title="WOOOOOW NeitherThis">
<div class="2">
<div class="3">
<a target="_blank" href="/NeedToChange/DispForm.aspx?ID=37">Link ID=37</a>
</div>
</div>
</div>
the above will result in the new hrefs:
/SomeText1/DispForm.aspx?ID=1
/WOOOOOW/DispForm.aspx?ID=1
[title] in $(".1[title]") makes sure that we're targeting .1 (BTW not a valid classs name :) ) element that actually HAS a title.
Than you .find() it's inner .3 Anchor child and access it's .attr("href", property returning a replace using RegExp:
/^\/([^\/]+)/ Explained on regex101.com
You would do it in a way like this:
if ($('.one').attr('title') == 'SomeText1') {
$('a[href*="/NeedToChange/"]').each(function(){
var newLink = $(this).attr('href').replace('/NeedToChange/','/NewLink/');
$(this).attr('href',newLink);
});
}
I changed the class to 'one' since you shouldn't start a class with a number.
Here is an example.
Looping through all of the links and getting the parents title as follow:
jsfiddle
$( ".3 a" ).each(function(){
var $parent = $( this ).closest( ".1" ),
title = $parent.attr( "title" ),
link = "/" + title + "/DispForm.aspx?ID=1";
$( this ).attr( "href", link );
});
This seems to work fine for the following html:
<div class="1" style="" title="SomeText1">
<div class="2">
<div class="3">
<a target="_blank" href="/NeedToChange/DispForm.aspx?ID=1">Link 1</a>
</div>
</div>
</div>
<div class="1" style="" title="SomeText2">
<div class="2">
<div class="3">
<a target="_blank" href="/NeedToChange/DispForm.aspx?ID=1">Link 2</a>
</div>
</div>
</div>
sorry saw the title with a space just now. Will look for update.
update 1:
like Roko C. Buljan mentioned you should probably split the title in an array and get the first element of it.
$('.1').each(function (){
var title = $(this).attr("title"),
clTitle = title.split(" ")[0];
var $link = $(this).find(".3 a"),
href = $link.attr("href"),
newHref = href.replace("NeedToChange", clTitle);
if(typeof $(this).attr('title') !== 'undefined') {
$link.attr("href", newHref);
}
});
updated fiddle: jsfiddle
I am having divisons show and hide.Now what i want is that on clicking "show" a divison below it show the details and the text of the "show" divison changes to "hide" and on clicking "hide" the details get hidden and text changes to "show".How this can be done .Please help
Here is my html :
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<span id="hide" class="" style="display:none">
<a href="#" class="fill-div" style="width: 100px;">
Hide details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
EDIT :
<tr class="">
<td width="40%" valign="top">
(<%=browser%>)
<span class="show" style="text-decoration: underline">
Show details
</span>
<div class="info" style="display:none; margin-left:2em">
<i>
"<%=useragent%>"
</i>
</div>
</td>
<td valign="top">
India(<%=rs.getString("IP_ADD")%>)
</td>
<td valign="top">
3:16 pm (0 minutes ago)
</td>
</tr>
My JAVASCRIPT :
<script>
$(document).ready(function() {
$(document).ready(function() {
$('.show').click(function() {
$(this).next().toggle();
var visible = $(this).next().is(":visible");
if(visible){
$('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}
});
});
</script>
It does not display the details.Please help
You do not need to span for toggling content. using two span for achiving this will make code more complicated. Try this:
Html
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
Js:
$('#show').click(function() {
$('#info').toggle();
var visible = $('#info').is(":visible");
if(visible)
$('a',this).html('Hide details');
else
$('a',this).html('Show details');
});
Working Demo
update:
Demo for multiple
$("#show a").click(function(e) {
e.preventDefault();
$("#info, #hide").show();
$("#show").hide();
});
$("#hide a").click(function(e) {
e.preventDefault();
$("#info, #hide").hide();
$("#show").show();
});
Use this to show/hide the "Details" div:
http://api.jquery.com/toggle/
Also, you could use just one span to display the "Show/Hide" link, changing the text accordingly when you click to toggle.
A breeze with jQuery. Try my example on jsfiddle.
// Gets executed when document and markup is fully loaded
$(document).ready(function() {
// Bind a click event on the element with id 'toggle'
$('#toggle').click(function() {
// Change text accordingly
if ($('#text').html() == 'Show details') {
$('#text').html('Hide details');
} else {
$('#text').html('Show details');
}
// Show / Hide info bar
$('#info').toggle();
});
});
You can do something like this:
http://jsfiddle.net/Mp8p2/
You don't need nearly as much HTML:
<span class="toggle">Show Details</span>
<div id="info">
Details shown here
</div>
along with just display:none in the css and the following jQuery:
$(".toggle").click(function() {
$('#info').slideToggle();
if($(this).html() == "Show Details") {
$(this).empty().text("Hide Details");
}
else {
$(this).html("Show Details");
}
});
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});
it works fine for one div
(function($) {
$(document).ready(function(){
$('#div1').hide();
$('a.plus').click(function(){
$('#div1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
How to make this slide toogle effect for multiple div on same page? I have multiple divs with different id to hide like #div1, #div2, div#3.
edit:
This is situation in html
<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>
(function($) {
$(document).ready(function(){
$('#div1, #div2, #div3').hide();
$('a.plus').click(function(){
$(this).next().slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
Presuming your HTML is something like this:
<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>
Then having a function like this will work for as many a.plus / div pairs you have:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
$(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
If your a.mores are, for whatever reason, nowhere near the divs themselves, you will have to set an attribute on the a.more to link it to a div, eg. (HTML)
<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>
... some more HTML
<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>
and Javascript:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
var id = 'div' + $(this).attr('data-article');
$('div#' + id).slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
Give your divs the same class (like 'div_to_toggle') and then instead of $('#div1'), $('#div2'), ... you can use one selector: $('.div_to_toggle') that will select them all:
$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();