score:1
You can try something like
<script language="text/javascript"> document.write('<div id="hideAccordion" style="display:none">'); </script>
<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>
<script language="text/javascript"> document.write('</div>'); </script>
and then on your document ready just call $('#hideAccordion').show()
or better still if there is a function that gets called after your accordion has loaded call this in it
something like
$(document).ready(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('#hideAccordion').show();
});
EDIT
Sorry, I have just read your question again and as you are not bothered about showing the content when the javascript is disabled you can simply use the following styles in your style sheet:
#accordion div {display:none;}
Once the accordion loads it should then work as normal without any of the content showing whilst the page is loading. One point I would make about this is that it isn't very accessible but it just depends on if you are bothered about coding to w3c standards, and some search engines look for large blocks of text that is display:none
and can lower your search ranking if you have a lot of text hidden like this
score:0
The example you provide is simply toggling a class. The content is actually there all along (look inside .side, you'll find .readmore_con).
.readmore_con is simply set to
display: none;
Upon clicking the "Read More' button, it adds a .readmore_open class to the .readmore_con div. The CSS for .readmore_open? ...You guessed it:
display: block;
If you really want to use accordion for this toggling, you can simply define an initial state of display: none; to your "more" content, and then toggle that during your accordion's .activate event: http://api.jqueryui.com/accordion/#event-activate
score:1
Google crawls my content when it's included in the DOM when the page loads even if the content is not displayed to the user 100% of the time (e.g. in accordions or rollover tooltips).
I don't see any problem with the "read more" text being unavailable if the person doesn't have Javascript enabled because the text isn't critical to use the page. I have never heard from a single client or a report from their customers that an issue existed from disabled JS.
Here is some useful reading on disabled JS browsing Browser statistics on JavaScript disabled
If JS disabling is a real concern for your user group then another option is using CSS to handle your accordion with something like this http://www.hongkiat.com/blog/css-content-accordion/
Related Query
- Can I dynamically generate & remove content from jQuery Accordion before tab is opened and closed?
- jQuery non-UL Accordion / Need header div seperate from content div
- Page footer bounces up and down in view as content changes from jQuery DOM manipulations (add/remove/etc)
- jquery accordion but load content from another script
- Parsing content from head tag from jQuery AJAX request
- Transition Content into view from the same direction using CSS Transitions
- Why doesn't my view load the jquery code from _Layout.cshtml but does when I add it lcoally to the view?
- Adding values from a file to list view in jQuery mobile
- Ajax Jquery .get dynamical generating Content from .CSV
- Link to content within an accordion from another accordion
- How to prevent a page from jumping to top when showing or hiding elements using jQuery fade option
- Using Jquery load to bring content in from 2 HTML pages
- Content not in view is not hiding like expected
- Showing And Hiding content Using Jquery
- How to get a <list> from mvc controller to view using jquery ajax
- Refresh table content from xsl transform using jquery
- jQuery content panel switcher prevents from accessing form elements
- Get HTML Content from another website like (http://www.google.com) using jquery
- jquery selector from iframe content to object content
- Submit form containing inputs and a List<Model> from view to action using jquery
- jquery loading content from select
- Jquery Accordion from Scratch is jerky
- Jquery Mobile adding content to ui-grid after document ready from jquery is fired off
- jQuery - Fill div with content from the title attribute when link is clicked
- How do i load content from a seperate .php/html file into a div with jQuery .append and window.location?
- Jquery Mobile .load() not retrieving content from Application Cache
- Display data from MySQL to be used to dynamically change content through jQuery
- BlocksIt.js jQuery plugin. How to attach content from url
- jQuery to extract HTML content from textbox
- Create iframes from original page content with jQuery
- jQuery moving content from one div to sibling
- Jquery Accordion Not Reconizing Content
- How to access other elements in root view from partial view with JQuery
- jquery tabs - switching content from included jsp to another
- jQuery Mobile -> Load content from external server
- jquery hiding submenu when change from one submenu opition to another
- Best jQuery Tooltip for fetching content from a static html file?
- Tablesorter live content from php sorting jquery
- jQuery - Best practice when returning content from getJson request to caller function
- Taking Post data for jquery function from a view in codeigniter using loops
- loading content from php file with jQuery
- Using jQuery to replace content within 2 paragraphs from 2 arrays
- Pass parameter from view to controller via jquery in MVC 2
- jQuery ui accordion with panel that contains scrolling content and a fixed header
- JQuery function fails when content loaded from Ajax form
- trying to make an accordion menu from a list - jquery indexhibit
- JsonResult is returning view html rather than a serialized object when called from jQuery Get()
- How to stop html header content from being included in jquery post results?
- Passing data from Action Method returning "PartialView()" into the parent View | using ASP.NET Core MVC and jQuery ajax
- jQuery periodical update : how to check whether content fetched is different from old content fetched
More Query from same tag
- Change img src with jQuery without loading the image multiple times?
- how can I trigger javascript css action?
- jquery raty get score in 0.5 interval
- How to play multiple mp3 files with Jplayer?
- Move up by UP key from textarea jquery
- Javascript on loaded page not executed
- Modal window displays very briefly
- How to execute a JQuery function when page loads and when it's called from another place
- jQuery script issue that provide a user with a popup dialog box with two PB. One to continue with the Session and another to end the Session
- How to link javascript function to html input
- How do i change value of variable by using jQuery UI range Slider
- Same function not giving same result after reload
- How to compare dropdownlist text with static string
- JQuery net::ERR_CONNECTION_REFUSED
- How to fix scroll problem when the modal dialog is show up?
- Toggle onclick between ascending en descending date using PHP
- mobile navigation bar using jquery
- how can I send post data in php programatically?
- Onclick Event Javascript & JQuery
- Full width bootstrap dropdown
- Block event trigger on element while function executes
- Display month and date only in bootstrap datetimepicker
- How can I delete all of my users' cookies for my website?
- How to change angular app route/URL on a 3rd party website from a FF web extension content_script without reloading page
- Sortable divs from/to draggable divs
- how to delete a selected file from multiple input file from a button click
- Image preview on hover direction aware?
- entire <tr> disappears after .click function
- Append a PHP code with AJAX
- When I have a timed poll function, how can I call it manually?