I am trying to complete a rollover or hoverover for a few links to display a div with a few screenshots. How should I go about writing this script?
Here is my HTML
<section class="tabs-content">
<table class="imagetable" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan="2" class="reportname">Exam Reports</th>
</tr>
<tr>
<td valign="top" class="formlabel" width="50%"><p><strong>For Faculty</strong><br />
</p>
<ul>
<li><strong>Exam Summary</strong><br />
<em>Colorful and attractive end-of-exam report provides a clean summary from Learning Outcomes to At-Risk students<br />
</em><br />
</li>
<% if session("medical") = 1 then %>
<li><strong>Category Analysis</strong><br />
<em>Learning outcomes performance breakdown</em><br />
<br />
</li>
<% end if %>
<li><strong>Item/Question Analysis</strong><br />
<em>Take an in-depth look at each item and its' performance</em><br />
<br />
</li>
<li><strong>List of Students Scores</strong><br />
<em>Simple list of every exam takers performance…configurable</em></li>
</ul>
<p> </p>
<p><strong>For Students</strong><br />
</p>
<ul>
<li><strong>Release results directly to students</strong><br />
<em>Make results available to students…configurable from simple to colorful</em></li>
</ul></td>
<td valign="top" class="formfield" width="50%"><p><strong>Misc Administrative Reports<br /> <!--this section will be hidden and an image placeholder will display the images from the above report links-->
</strong></p>
<ul>
<li>ET Elapsed Time</li>
<li>Backward Navigation</li>
<li>Unanswered Essays</li>
<li>Mid-Exam Restart</li>
<li>Hardware Comparison</li>
<li>Absentee Report</li>
<li>Missing Keywords</li>
</ul></td>
</tr>
</table>
</section>
</div>
</div>
Ideas? I wan the last list to be replaced by an image on rollover of the above links.
Chris
Use jQuery's .hover() method. It allows you to define a method that fires when the user hovers over a selector. It also has a hoverOut event handler where you define a method to address as user leaving the selector.
jquery hover api
this would be relevant for you:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
so you sould do something like:
$('yourLinkSelector').hover(function(){
//handle the user mouseover here..
//remove last list
//show your screenshot div
}, function(){
//handle the mouseout here..
//do whatever div removal you need for the screenshot div
//show last list again...
});
Related
I've 5 different static pages: index.html syllabus-link.html advanced-linux.html contact.html gallery.html.
The functionality is quite simple - User clicks on one of the syllabus type and the user is presented with a `word file' having 2 options:
1) Download
2) View its contents.
The syllabus menu-header is not clickable, but when the user hovers on it, it would list the syllabus types in its dropdown-menu.
Let's say, I'm on index.html page and being there, I decided to click on "Linux" option from the dropdown-menu of syllabus page. The Linux word file gets displayed on the screen with options for the user to either view it's contents or download the word file(based on jQuery condition written in syllabus page). Now that I've landed on the syllabus page and this time when I try clicking on other options viz.., "Hadoop" or "CCNA", nothing shows up. But had I tried clicking either of "Hadoop" or "CCNA" option being on index.html page, it displays the correct "word file".
From external page ==> click works
Being on syllabus page ==> click doesn't work
Functionality is similar to what is shown ==>> https://www.atcs.com/ ABOUT US
section
I understand that if I write <a href="#">in syllabus page, then the current issue can be fixed, but I would lose the current working functionality. How do I achieve both?
Any help would be highly appreciated !!!
index.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">Home</li>
<li><a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>Advanced Linux</li>
<li>Contact Me</li>
<li>Personal Gallery</li>
</ul>
</nav>
</div>
</div>
syllabus-link.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">
Home
</li>
<li>
<a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>
Advanced Linux
</li>
<li>
Contact Me
</li>
<li>
Personal Gallery
</li>
</ul>
</nav>
</div>
</div>
<div id="linuxSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="hadoopSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="ccnaSyllabus" style="text-align: center;">
<font color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>View
</blink></font>the complete CCNA syllabus:<br><br>
<a href="documents/2- CCNA-Syllabus.pdf" target="_blank">
<img border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75" height="75">
</a>
</b>
</h5></font>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>Download
</blink></font> the complete CCNA syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/2- CCNA-Syllabus.pdf" download> <img
border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
JS file within syllabus-link.html
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
if (document.getElementById(anc) == linuxSyllabus) {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (document.getElementById(anc) == hadoopSyllabus) {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (document.getElementById(anc) == ccnaSyllabus) {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
});
</script>
Thanks for making it more clear on what you are trying to accomplish, the html and javascript you added helps significantly. The issue you are seeing is the javascript is only being run once on page load. I would recommend wrapping that up in a function, that way you can call it on page load, as you are doing now, as well as every time one of those links is clicked.
js file within syllabus
<script type="text/javascript">
$(document).ready(function() {
// this will get called when you want to swap the visible div
function updateVisibleDiv(viewName) {
// we are going to pass in a string as viewName, we want to check it against a string
// also, I added show for each syllabus, since we will be calling this to change
// which syllabus is visible, we have to show the one they select
if (viewName == 'linuxSyllabus') {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (viewName == 'hadoopSyllabus') {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (viewName == 'ccnaSyllabus') {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
}
// this will get run on page load - I like wrapping it in a function to make
// it more clear what we are doing on page initialization
function init() {
var syllabus = window.location.href.split('#')[1];
// syllabus should equal one of ['linuxSyllabus', 'hadoopSyllabus', 'ccnaSyllabus']
// we pass it in to our function, and it loads the correct screen
// up to this point, the page will work the same as it always has, this is just a refactor
updateVisibleDiv(syllabus);
}
// this will be the new functionality that updates which syllabus is visible
// this will be called when a link is clicked
function updateView() {
// get the value in your href from the clicked link
var syllabus = this.getAttribute('href').split('#')[1];
// now we will just update the visible div
updateVisibleDiv(syllabus);
}
// we are going to attach a click event to those three links
// this is selecting all 3 links by their id, and adding an on click event handler
$('#linux, #hadoop, #ccna').on('click', updateView);
// call the init function to initialize the page
init();
});
</script>
Disclaimer: I wasn't able to test this myself, let me know if you have any issues and I can try to help you work through them.
One big problem is that your conditionals within the if and else if statements should be using strings.
eg. if (document.getElementById(anc) == 'linuxSyllabus')
Secondly, you are using selectors within each conditional, and as far as I can tell those id's do not exist in the html. Your id's are linux, hadoop, and ccna.
You will want to select those as $('linux') OR by the href like this:
$("a[href='#linuxSyllabus'")
I'm somewhat unsure of the problem you are actually looking to solve, but those are some code issues that jump out at me. Also try checking the console in your browser and you'll surely see some errors.
I don't know it is what you looking for or not. I just give a solution whatever I can understand from your description.
You can use a common class for every syllabus container in syllabus like .syllabusContainer and change js like below
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
$(".syllabusContainer").hide();
$("#"+anc).show();
});
</script>
in syllabus page use same menu link as index.html
I've tried every combination/individual selector and cannot figure this one out.
I have a 'wrapper' page that has two primary divs with id's:
toc-container
topic-container
The topic-container div has an html page loaded into it (that I cannot modify the source of), via the jquery .load function.
There are tags in those loaded pages that have href elements that I need to loop through and change. Here is the html of the loaded page:
<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width= "16">
<p class="bodytext"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>
I have this function that is called after the page is loaded:
$('#help-content').find('a').each(function() {
var initHref = $(this).attr('href');
console.log(initHref);
var prefix = '?topicID=';
var newHref = prefix+initHref;
$(this).attr('href', newHref);
});
How can I change all href values in the page using jquery? I've tried targeting every selector possible : (
You can use the following vanilla JavaScript statement to get all anchor tags on the page
document.querySelectorAll('a')
Hope this helps you to get an initial idea on how to extend it for your solution. Happy coding.
1. Your code works, but you were only logging the original
href values. If you log again at the end of your code, you'd see the changes.
A more simple selector would be just $('#help-content a') and then you wouldn't need the .find() method call.
The JQuery .each() method is automatically passed arguments
that make referencing the element being enumerated a bit more simple,
so use that.
_target=self is only necessary if you are using the no
longer supported frameset element in your code. By default, links
open in the current window.
The vspace and hspace HTML attributes are deprecated.
All the other styling of your images (and your td elements, and really everything else) should really be done
with CSS. And, because all your styling is identical for each of
the images, a single CSS rule can set them all up.
Although your code does work, your prefix and newHref variables
aren't really necessary since you only use them once.
// When the DOM is ready...
$(function(){
$('#help-content a').each(function(idx, el) {
var initHref = $(el).attr('href');
$(el).attr('href', '?topicID=' + initHref);
console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));
});
});
/* Don't use HTML to style your page. That's what CSS is for.
And, using CSS will remove the need for redundant HTML. */
#help-content img {
height:16px;
width:17px;
text-align:bottom;
border:none;
}
#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
<table class="relatedtopics aboveheading">
<tr>
<td>
<p class="bodytext">
<a href="overview.htm">
<img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="accessing_solutions.htm">
<img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="best_practice_browser.htm">
<img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
</a>
</p>
</td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist">
<li class="numberlist">On the Logon window, click the
<span class="procedureinterfaceelement">Change Password</span> link.
</li>
<li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
</li>
<li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
</li>
<li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
</ol>
</div>
(Searched the web and here for a couple hours with no success...novice level programmer)
What I have: Table with single row, containing many short columns. The columns are entered chronologically in the HTML, adding new columns to the right. (This long row is in a short height, wide width page displayed in an iframe, and is manually scrolled left/right.)
What I want to do: Create a toggle-link reverse column display order so that the newest columns appear to the left and oldest to the right when desired.
Since my membership is new, I can't post a screenshot. So here's my best work-around attempt:
The web page this solution is to be applied to is found at:
thetransformer.us (home page, in the upper area iframe file)
A screenshot of a text illustration of desired output of a solution is found at:
thetransformer.us/images/reverse-col-order-illustration.jpg
CODE_BELOW: (Main page:) & (iframe file code (not scrollable DIV as I indicated earlier)
Many lines of the same type of code blocks omitted.
<div>
<iframe src="gallery.html" scrolling="yes" width="645" height="300" class="rounded10"></iframe>
</div>
<body style="margin:15px; background-image:url(images/bgrepeat.png)">
<div id="pl_main">
<button onclick="reverseOrder()">Reverse</button> <span style="color:white;">The horizontal link list is currently unavailable. Use View <span style="color:#99ccff;">Table of Contents</span> below.</span>
<table class="gallery">
<tr id="tableRow">
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br /><img src="pl_thumbs/1985-07_thumb.jpg" />
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br /><img src="pl_thumbs/1986-01-02_thumb.jpg" />
</a></td>
<td valign="top" id="19862"><a href="86-0304.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Mar-Apr<br /><img src="pl_thumbs/1986-03-04_thumb.jpg" />
</a></td>
<td valign="top" id="19863"><a href="86-0506.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> May-Jun<br /><img src="pl_thumbs/1986-05-06_thumb.jpg" />
</a></td>
</tr>
</table>
</div>
</body>
</html>
Thanks, Doug
[EDIT]: Here is the solution of reversing the column in JQuery.
<body>
<button onclick="sortReverse()">Click</button>
<table class="gallery">
<tbody><tr id="tableRow"><!-- id for test code, may remvoe later -->
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br><img src="pl_thumbs/1985-07_thumb.jpg">
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br><img src="pl_thumbs/1986-01-02_thumb.jpg">
</a></td>
</tr>
</tbody></table>
// Remember to include JQuery library.
<script>
function sortReverse(){
// Select the parent element by id.
var row = $("#tableRow");
// Get all the children (columns)
var columns = $.makeArray($("#tableRow > td"));
// empty the parent content
row.empty();
// Append the reversed children array to the parent
row.append(columns.reverse());
}
</script>
</body>
I was trying to make a fade in/fade out animation. I wanted it to wait a few seconds then basically switch between two divs. It works, but it kinda jumps around outside of its container. Heres what it looks like http://programmingbounty.azurewebsites.net/
and here's the relavent section of code:
<div id = "TopBox" style="height: 350px; position: relative;">
<div id = "ForReaders" runat="server" style="opacity: 1" >
<div id = "Welcome" >
Welcome to Programming Bounty, where all your project resources can be easily found and implemented without registration!
<br />
<br />
<ul>
<li>Get high quality code and information from our members</li>
<li>No signup nessesary unless your making a post</li>
<li>Everything is absolutely free!</li>
</ul>
<br />
Check it out!
</div>
<div id = "Catagories" align="center">
<h3>What are you searching for?</h3>
<div id = "dropdown">
<asp:DropDownList ID="DropDownList1" runat="server" Width="500px">
<asp:ListItem>Select Language</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Objective-C</asp:ListItem>
<asp:ListItem>Perl</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>Python</asp:ListItem>
<asp:ListItem>Ruby</asp:ListItem>
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>HTML/CSS</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<br />
<div id = "getfreecodenow">
Get Free Code Now!
</div>
</div>
</div>
<div id = "ForWriters" runat="server" style="display: none">
<div id = "WelcomeProgrammers" >
Welcome to Programming Bounty, where you get rewarded for contributions!
<br />
<br />
<ul>
<li>Write short code snippets, tutorials or other resources easily</li>
<li>People see and use your resources</li>
<li>You get paid in either cash or community currency!</li>
</ul>
<br />
Check it out!
</div>
<div id = "ProgrammingCatagories" align="center">
<h3>What are you searching for?</h3>
<div id = "Div3">
<asp:DropDownList ID="DropDownList3" runat="server" Width="500px">
<asp:ListItem>Select Language</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Objective-C</asp:ListItem>
<asp:ListItem>Perl</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>Python</asp:ListItem>
<asp:ListItem>Ruby</asp:ListItem>
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>HTML/CSS</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<br />
<div id = "GetPaidNow">
Get Paid Now!
</div>
</div>
</div>
<br />
</div>
</div>
<div id = "TopCodeWrapper">
<div id = "TopCodeContainer">
<div id = "topcodeheader" dir="ltr">
<div id = "Popular">
<h3>Trending Now</h3>
<div id = "tabs" align="left"
style="margin: 0px; ">
<script src="script/jquery.js" type="text/javascript"></script>
<script type = "text/javascript">
function fade() {
var delay = 5000;
$(document.getElementById("<%= ForReaders.ClientID%>")).delay(delay).fadeOut("slow");
$(document.getElementById("<%= ForWriters.ClientID%>")).delay(delay).fadeIn("slow");
$(document.getElementById("<%= ForWriters.ClientID%>")).delay(delay).fadeOut("slow");
$(document.getElementById("<%= ForReaders.ClientID%>")).delay(delay).fadeIn("slow");
}
$(document).ready(function () {
var d = setInterval
(fade(), 1000);
});
</script>
You are completely misusing .delay() and .setInterval().
There is absolutely no need to use .delay() here. It is used to queue timed events on an element. For example $(element).fadeOut().delay(1000).fadeIn() will make the element fade out, then after 1 second fade back in. So using it on an idle element has no use at all.
I assume you want something like this: http://jsfiddle.net/EvD66/1/
I'm making the first element fade out and then, using a callback triggered once the animation is over, I make the second one fade in.
how can I use jquery to get the text inside of a td?
I currently have:
<div id="divName">
<table id="tableName">
<tr>
<td id="g${req.Name}</">${req.Name}</td>
<td><input type="button" id="showName_${req.fName} rel="viewName_${allReq.requestId}
value="Show " title="Show customer ${req.fName}"
onclick="buttonToggle(this,'Hide ','Show ','nameDiv_${req.fName}', '${req.fName}')" />
</td>
</tr>
</table>
<div id="nameDiv_${req.fName}" style="display: none">
<p>test</p>
</div>
</div>
I would like to be able to have the title of the show/hide button say Show customer John and when the button is clikced to hide for the title to change to Hide customer John and then when the button is clicked again to go back to the title to say show customer John.
I was able to use something like this for the show/hide button:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
but how can I get the name to append to show and hide when the button is toggled?
You can use the text method to get the value of your <td>:
$('#your-td-id').text();
Here's an example of it working.