Jump to content

Hiding and Showing Divs


nwolfe

Recommended Posts

Hi, I am new to html so please forgive the following code, I am trying to create text that when you click on it it expands and reveals the hidden text. The code below does this perfectly, but is there anyway that the text will automatically hide when the user clicks on another title from the list. Currently you click on the first hidden div it expands, then you click on the second hidden div it also expands. To collapse the first div I have to click on the title again but I'd like it to collapse as soon as I've clicked elsewhere. Any ideas?

Thanks, Noreen




<p>The first stage of this curriculum is to help you identify your strengths and personal growth opportunities and needs. There are lots of tools and activities available on the internet and in the market place to help you self analyse your strengths and development areas and we have included some of the most popular to help you kick start your development journey. </p>

<p></p>

<p>Click on any of the following titles to find out more</p>

<p><a style="line-height: 1.231;" onclick="javascript:ShowHide('HiddenDiv')"><strong>360 Feedback</strong></a></p>

<div class="mid" id="HiddenDiv" style="display: none;">360 degree feedback is a performance appraisal method that will help you gather feedback from a number of sources including your line manager, peers and other stakeholder groups. If done properly, it will provide you with a holistic view of your skills and performance, as well as the quality of your working relationships, helping you develop an accurate PDP that helps you get to where you want to be. <br /><br /></div>

<p><a style="line-height: 1.231;" onclick="javascript:ShowHide('HiddenDiv1')"><strong>Blind Spots</strong></a></p>

<div class="mid" id="HiddenDiv1" style="display: none;">The saying goes ‘’you don’t know what you don’t know’ and as such, this activity is really useful at helping you identify your blind spots. Blind spots (defined in the context of personal development) refer to the aspects of ourselves we aren’t fully conscious of. This can refer to a broad spectrum of different things – our traits, values, actions, , habits, feelings, thoughts, etc. Identifying your blind spots improves your self awareness which usually results in better performance, relationships and speedier progression to achieving your personal goals. To find out more on blind spots, please visit:


<br /><br /></div>

<p><a style="line-height: 1.231;" onclick="javascript:ShowHide('HiddenDiv2')"><strong>The Process</strong></a></p>

<div class="mid" id="HiddenDiv2" style="display: none;">There are both formal and informal ways of collecting 360 feedback and the questions that you ask can be as broad or specific as you wish, depending on your personal circumstances. In order to capture 360 degree feedback, a set of questions is usually sent to typically between 5 and 10 people who answer the questions about you. In order to ensure the feedback is holistic, we recommend that the people you ask, represent different types of work relationships -they could be peers, direct reports, more senior colleagues, or customers – hence the term ’360 degree’ feedback.<br /><br />If this is your first time getting feedback, asking the following questions are a good place to start;<br /><br />What do you enjoy about working with me?<br />In your opinion, what are the things that I do well?<br />In your opinion, what could I improve on?<br /><br />Your line manager or HR Business Partner can support you with this. We recommend that when sending the questions to your selected stakeholders, you request that their answers are returned to either your line manager or HRBP who will then give you the feedback confidentially. We find that people feel more comfortable to provide more honest feedback this way. <br /><br /></div>

<p><a style="line-height: 1.231;" onclick="javascript:ShowHide('HiddenDiv3')"><strong>Strengths Map</strong></a></p>

<div class="mid" id="HiddenDiv3" style="display: none;">A common mistake that is made when creating PDP’s is that people often forget the most important thing about themselves - their strengths. Strengths are often the thing that we look past or take for granted as individuals yet these are the behaviours/skills that we should absolutely harness and focus on strengthening even more because these tend to be the tasks/activities that we enjoy the most, so let’s leverage them.<br /><br /> Please see attached a template for you to complete to help agitate your own analysis on what your strengths are. The feedback that you receive from your 360 feedback should also feed in to this. We recommend that you discuss this with your line manager at your next 121 to make sure that your role is utilising all of your strengths to maximise your job satisfaction. This activity is not a 5 minute task – it’s designed to be a reflective activity and you may have to keep coming back to it and seeking other perspectives in order to complete it fully and accurately.<br /><br /></div>

<script type="text/javascript">// <![CDATA[

function ShowHide(divId)

{

if(document.getElementById(divId).style.display == 'none')

{

document.getElementById(divId).style.display='block';

}

else

{

document.getElementById(divId).style.display = 'none';

}

}

// ]]></script>


Link to comment
Share on other sites


function ShowHide(divId){

var divtag= document.getElementsByTagName('div');

for(i=0; i<divtag.length; i++)

{

if(divtag.className === "mid"){divtag.style.display="none";

}

}

 

if(document.getElementById(divId).style.display == 'none')

{

document.getElementById(divId).style.display='block';

}

else

{

document.getElementById(divId).style.display = 'none';

}

}

When function called it fitsts loop through all divs, the if condition will filter all div with class name 'mid' and hide them using display none, then it woll proceed with existing code to show selected div tag.

Edited by dsonesuk
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
×
×
  • Create New...