Jump to content

Bernard West

Member
  • Posts

    573
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Bernard West

  1. Hi @LizzyN ... In my code where I write: You need to change what's between the single quote marks after src= So, for example, your image might be .... src='http://yourimage.com/yourimage.jpg' ...
  2. Yeah it will be. I'll try and get back to this later to have a look at it. If I don't, it might be a week or so before I can get to it. Got to travel to a funeral on the other side of the country leaving tomorrow. Off the top of my head, what you'd need to do is add some code inside the if/else (state.collapsed) block, to change the image to the new/correct one for each branch of that if/else block. To change the image you'll need to get the element with code and change it's 'scr' attribute.
  3. Ah nice! Yeah, jQuery makes these sorts of things easier. I'll have to learn about this markdown stuff. That's far easier than writing the whole html code and content like I did.
  4. Well, that took longer than I thought. Story of my coding life! ;) Anyway, here’s a bare bones solution, that you will need to style up to your own satisfaction. I’ve implemented a dummy FAQ temporarily on my free trial site that I am building and you can see it here for a few more days before I delete it: http://bernard-west.squarespace.com/faq/ Alright, firstly, don’t delete your current FAQ/product pages. Do this on a new page to make sure it works first. Next add a new “page” to your site. Click the plus symbol to add a new block to your page. Select “code”. Paste this HTML code into the popup box (with your own questions and answers - replace “Question 1” etc with your own questions/products, replace “Here is answer 1…” etc with your own answers/descriptions): <div class="questionBlock"> <span class="question" id="Q1" onclick="expand('A1')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 1</h2></span> <span class="answer" id="A1"><p>Here is answer 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> <div class="questionBlock"> <span class="question" id="Q2" onclick="expand('A2')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 2</h2></span> <span class="answer" id="A2"><p>Here is answer 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> <div class="questionBlock"> <span class="question" id="Q3" onclick="expand('A3')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 3</h2></span> <span class="answer" id="A3"><p>Here is answer 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> You will also need to change the image source for the little arrow that I randomly selected off the net. That is, this bit here: <img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Change the link between the single quotes to your own preferred image (if you even want to use an image. If you don’t want an image, just delete the above image tag wherever it occurs in your HTML. Save that then click the settings button on the left hand menu and then click “code injection”. This is where you’ll put the JavaScript. Put the following JavaScript code into the “Footer” section: <script> var arrState=[]; (function() { var arrAnswerBlocks=document.getElementsByClassName('answer'); for (var i=0;i<arrAnswerBlocks.length;i++) { var element = arrAnswerBlocks[i]; var state = {id:(element.id), collapsed:true}; arrState.push(state); } })(); function expand(id) { var state={}; var answerBlock=document.getElementById(id); for (var n=0;n<arrState.length;n++) { state=arrState[n]; if (state.id==id) { if (state.collapsed) { answerBlock.style.display="block"; state.collapsed=false; } else { answerBlock.style.display="none"; state.collapsed=true; } //end if }//end if }// end for } </script> If anyone wants an explanation of what the JavaScript is doing, let me know. The last step is to put in your CSS styling. Click the “a” on the left menu to go back to editing your new page. Click the “Settings” button in the top right of the page and then click “Advanced” and enter the following CSS into the code box: <style> .question { cursor:pointer; color:black; } .answer { display:none; color:#606060; } .questionBlock { padding:2px; } #clickIcon { width:0.8em; height:auto; position:relative; top:2px; } </style> This is the code you want to adjust to get your styling right. You can change colours and fonts and spacings etc here. One strange thing I noticed while doing this is that the preview of the site while you are logged in doesn’t match the actual live site. I think it’s some sort of clash between the style editor and the custom CSS that we entered. If you have another browser type, access your site as a visitor (i.e. not logged in) via it and you can refresh it and see the live view as you make changes while logged in on the other browser. Go for it! :)
  5. I can have a go at doing this. It should be possible with a mix of javascript and css. Can either of you post a link to your site so I have something to work with? Cheers.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.