Jump to content

How To Show Or Hide Description With Javascript?


sunicani
 Share

Recommended Posts

I am coding a function with javascript in order to show or hidden product description via click on 'more' or 'minimize', and the html code shown below,

<html><head></head><body><div id="brandlist_cellphones"><div id="product_images"><img src="nokia.jpg" alt="Pharos Traveler 137 Black Cell Phone" onclick="" onmouseover="" onmouseout=""></div><div id="product_description"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p class="productCopyCase"><span>Description:</span> <span id="productDescriptionSnippet">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<a href="java script:swapProductDescription()" class="green" style="color:#528C00" onClick="om_singleH_link('pgrabcom,pgrabusops,pgrabglobal','','prop36', 'top|read_more|327|-|search_getprod','top','75480063fd765bbd');">read more</a></span></p><div id="productDescriptionRaw">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos’ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. <a id="productDescriptionHide" class="green" style="color:#528C00" href="java script:swapProductDescription()" onClick="om_singleH_link('pgrabcom,pgrabusops,pgrabglobal','','prop36', 'top|minimize|327|-|search_getprod','top','75480063fd765bbd');">minimize</a></div></div></div></body></html>
alos. the effects like url
I really don't know how to scripting with Javascript to fulfill the function? any experts who can guide me in javascript section for the purpose of minimize and read morethanks a lot!
Link to comment
Share on other sites

you have to set #productDescriptionRaw as display: none;you have to assign id to 'read more' link (id="readmore")onclick="swapProductDescription()" in BOTH above anchor links.<script type="text/javascript">/*<![CDATA[*//*---->*/function swapProductDescription(){var description=getElementById("productDescriptionRaw");var readmore=getElementById("readmore");var minimize=getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";}}/*--*//*]]>*/</script>

Link to comment
Share on other sites

yeah, good job! thank you very much, mate. and, I have revised as you required. however, I could not get through it. maybe, I am a beginner, and can you write the whole html code as well as javascript for me? thanks, good man.

Link to comment
Share on other sites

I am coding a function with javascript in order to show or hidden product description via click on 'more' or 'minimize', and the html code shown below,alos. the effects like url I really don't know how to scripting with Javascript to fulfill the function? any experts who can guide me in javascript section for the purpose of minimize and read morethanks a lot!
who can give me the entire html&javascript code? many thanks
Link to comment
Share on other sites

hi dsonesuk,I have followed your code and, made revision accordingly, maybe something wrong with my code? would you please get into my html code to check for me?or any experts associate with me? many thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=getElementById("productDescriptionRaw");var readmore=getElementById("readmore");var minimize=getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";}}</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p class=""><span>Description:</span> <span>The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<onclick="swapProductDescription()><a id="readmore" href="java script:swapProductDescription()" class="green" style="color:#528C00" onclick="swapProductDescription()">read more</a></span></p><div style="display:none" id="productDescriptionRaw">The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00" href="java script:swapProductDescription()" onclick="swapProductDescription()">minimize</a></div> </div></body></html>
Link to comment
Share on other sites

sorry i hadn't had my coffee yet! use belowvar description=document.getElementById("productDescriptionRaw");var readmore=document.getElementById("readmore");var minimize=document.getElementById("productDescriptionHide");another problemchange href="java script:blah blah" to href="java script:void(null)" WITHOUT space between java and script. nasty habit of adding a space when you paste here.

Edited by dsonesuk
Link to comment
Share on other sites

Hi, after following dsonesuk advice, you sould also remove the href="java script:swapProductDescription()" and the href="java script:swapProductDescription()"these two try to open a page with that location, with the onclick on those <a> is enoughthe anchors loose their underline but this can be styled.edit: dsonesuk got it first

Edited by alexnofue
Link to comment
Share on other sites

to account for non javascript page i suggest setting the styling for the link to style="color:#528C00; display:none;"and then adding window.onload=swapProductDescription;</script> Note: Just above closing tagthis will show all the content, without links if javascript disabled.orif enabled will run the javascript function to hide the main content, and now show the link for read more.

Link to comment
Share on other sites

thanks for you all, mates. the code all you wrote for me worked fine but, another question is when I click 'read more' on the original page in pricegrabber, it shown below,

Pharos Traveler 137 Black Cell PhoneGSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137Add Pharos to FavoritesAs low as $489.99 from Dell HomeDescription: The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos’ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. minimize
However, mine shown like,
Pharos Traveler 137 Black Cell PhoneGSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137Description: The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos¡¯ proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather. minimize
so what's happening? I was really baffled, 555
Link to comment
Share on other sites

Note: this allows for one paragraph of text ONLY for the short description,which includes the readmore link within it, anything not in the short description won't be hidden.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=document.getElementById("productDescriptionRaw");var readmore=document.getElementById("readmore");var description_short=document.getElementById("product_desc");var description_short_p=description_short.getElementsByTagName("p");var minimize=document.getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";description_short_p[0].style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";description_short_p[0].style.display="";}}window.onload=swapProductDescription;</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p style="display:none" class=""><span>Description:</span> <span>The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDP...<a id="readmore" href="java script:void(null)" style="color:#528C00; display:none;" onclick="swapProductDescription()">read more</a></span></p><div id="productDescriptionRaw"><span>Description:</span> The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00; display:none;" href="java script:void(null)" onclick="swapProductDescription()">minimize</a></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

this will creates short description from the main description, which will save you entering the content twice.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><script type="text/javascript">function swapProductDescription(){var description=document.getElementById("productDescriptionRaw");var readlink="<a id=\"readmore\" href=\"java script:void(null)\" style=\"color:#528C00;\" onclick=\"swapProductDescription()\">read more</a>";var description_short=document.getElementById("product_desc");var description_short_p=description_short.getElementsByTagName("p");description_short_p[0].innerHTML=(description.innerHTML.substr(0,313)+"..."+readlink);var readmore=document.getElementById("readmore");var minimize=document.getElementById("productDescriptionHide");if(description.style.display == "none"){description.style.display="";minimize.style.display="";readmore.style.display="none";description_short_p[0].style.display="none";}else{description.style.display="none";minimize.style.display="none";readmore.style.display="";description_short_p[0].style.display="";}}window.onload=swapProductDescription;</script></head><body><div id="product_image"><img src="N97S.jpg" /></div><div id="product_desc"><h1>Pharos Traveler 137 Black Cell Phone</h1><h4>GSM, Bluetooth, 3.1MP, 512MB, microSD Slot - MPN: PTL137</h4><p style="display:none"></p><div id="productDescriptionRaw"><span>Description:</span> The Traveller 137 GPS Smartphone from Pharos gives you high performance in an expressive design with mobility and productivity in mind. It has a 3.5-inch flush touch-screen WVGA display. The Smartphone features the 3.5G communications capability based on a tri-band UMTS/HSDPA/HSUPA and a quad-band GSM/GPRS/EDGE cellular modems. It offers 7.2Mbps download and 2Mbps upload speeds enabling fast Web browsing, email and other Internet services. There are two on-board cameras, a 3.1 MP digital camera for recording pictures and video, and a 0.3 MP camera for video conferencing. The unit comes with Pharos' proprietary Smart Navigator software and server-based travel information and navigation service. Additionally, the device is pre-loaded with Microsoft Live Search, providing free information about traffic, gas prices, movie times and weather.<a id="productDescriptionHide" class="green" style="color:#528C00; display:none;" href="java script:void(null)" onclick="swapProductDescription()">minimize</a></div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...